0

ここでの私の最初の投稿で、この質問をする前にたくさん検索したと思います。

これらの例を使用しましたが、成功しませんでした:

私の質問は：

内部にフォームがあるdivがあります

<div id="mydiv">
<form id="myform" method="post" action="action.php?id=1&lang=en">
...
</form>
</div>

問題は：

1) フォームの結果を div "mydiv" に送信できません

2) 目標は、更新を行わずに送信することです

1も2も私にはうまくいきません

使用する JavaScript:

$(document).ready(function() {
  $('#myform').submit(function () {
    $.post('action.php?id=1&lang=en', 
    $('#myform').serialize(), 
    function (data, textStatus) {
        $('#mydiv').append(data);
    });
    return false;
   });  
});

編集:私は2つのファイルを使用します:

1 がメイン ファイルで、2 番目のファイル (「myform」があるファイル) は「mydiv」内で使用されます。

SUBMITすると、フォームは新しいページにジャンプします（想定されていません）が、Jquery/javascriptスクリプトはロードされていません（メインファイルにあるため）。

example:

FILE_1 main.php (with jquery/js scripts loaded) 

loads inside "mydiv" 

FILE_2 action.php (with the form)

複雑？

私の質問への更新：

ここで何をしようとしているのかを示す簡単なスクリプトを作成しました。

divform.html

<title>test</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>

<!-- THIS SCRIPT ALLOW TO USE A DIV AS A TARGETED IFRAME -->    
<script type="text/javascript">
    /***********************************************
    * Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
    var loadedobjects=""
    var rootdomain="http://"+window.location.hostname
    var bustcacheparameter=""

    function ajaxpage(url, containerid){
    var page_request = false
    if (window.XMLHttpRequest) // if Mozilla, Safari etc
    page_request = new XMLHttpRequest()
    else if (window.ActiveXObject){ // if IE
    try {
    page_request = new ActiveXObject("Msxml2.XMLHTTP")
    } 
    catch (e){
    try{
    page_request = new ActiveXObject("Microsoft.XMLHTTP")
    }
    catch (e){}
    }
    }
    else
    return false
    page_request.onreadystatechange=function(){
    loadpage(page_request, containerid)
    }
    if (bustcachevar) //if bust caching of external page
    bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
    page_request.open('GET', url+bustcacheparameter, true)
    page_request.send(null)
    }

    function loadpage(page_request, containerid){
    if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
    document.getElementById(containerid).innerHTML=page_request.responseText
    }

    function loadobjs(){
    if (!document.getElementById)
    return
    for (i=0; i<arguments.length; i++){
    var file=arguments[i]
    var fileref=""
    if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
    if (file.indexOf(".js")!=-1){ //If object is a js file
    fileref=document.createElement('script')
    fileref.setAttribute("type","text/javascript");
    fileref.setAttribute("src", file);
    }
    else if (file.indexOf(".css")!=-1){ //If object is a css file
    fileref=document.createElement("link")
    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute("href", file);
    }
    }
    if (fileref!=""){
    document.getElementsByTagName("head").item(0).appendChild(fileref)
    loadedobjects+=file+" " //Remember this object as being already added to page
    }
    }
    }   
</script>   
</head>

<body>

<div id="centerbody" style="width: 600px; height: 300px; border: 1px solid #ccc; margin: 0 auto;">

    <div id="linkzone" style="width: 120px; height: 250px; border: 1px solid #f00; float: left; display: inline;">

    <a href="javascript:ajaxpage('action.php?i=link1', 'mydiv');">goto link1</a>
    <br>
    <a href="javascript:ajaxpage('action.php?i=link2', 'mydiv');">goto link2</a>

    </div>

    <div id="mydiv" style="width: 400px; height: 200px; border: 1px solid #000; float: right; display: inline;">
    </div>
</div>

</body>
</html>

「Mydiv」内にロードされるphpスクリプト/フォームのことを行います：

action.php:

<script type="text/javascript">


    /** THIS SCRIPT IS SUPPOSED TO ALLOW A FORM SUBMITION BEING loaded in the same div, without refreshing it */
    $(document).ready(function() {
            $('#myform').submit(function () {
                $.post('action.php?i=link2', $('#myform').serialize(), function (data, textStatus) {
                     $('#mydiv').append(data);
                });
                return false;
            }); 
    });
</script>
<?
if ($_GET['i']=="link1") {
    echo "link 1";
    ?>
    <br><a href="javascript:ajaxpage('action.php?i=link2', 'mydiv');">goto link2</a>
    <?  
}
if ($_GET['i']=="link2") {
    $error="0";
    $sent="";
    if (isset($_POST['submit'])=="go") {
        if ($_POST['form_1']!=""){
            echo "good...( {$_POST['form_1']} )...<p>";
            $sent=1;
        }
        else{
            $error=1;
        }
    }
    if ($sent=="1"){
        echo "...gogogogo...  should refresh to another link...5 secs after... (inside here)";
    }
    else{
        echo "link 2";
        ?>
        <br><a href="javascript:ajaxpage('action.php?i=link1', 'mydiv');">goto link1</a>
        <form id="myform" method="post" action="action.php?i=link2">
        input zone: <input type="text" name="form_1"> <input type="submit" value="go" name="submit">    
        </form>
        <?
        if ($error=="1") {
            echo "* mandatory fields"; 
        }
    }
}
?>

おそらく今、あなたは私が何を修正/しようとしているのかをよりよく理解することができます.

私が言ったように、私の最初の投稿と私はこれにあまり慣れていません:)

4

1 に答える 1

0 
$('#myform').submit(function (e) {
  e.preventDefault(); // prevent usual submit and refreshing

  $.ajax({
    // pass needed parameters

    success: function (data) {
      // do what you want with data you get through ajax
    }
  }); 
});
于 2012-08-23T03:58:40.427 に答える