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 是主文件，第二个文件（具有“myform”的文件）在“mydiv”中使用。

当我提交时，表单跳转到新页面（不应该）但没有加载任何 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 脚本/执行表单操作：

动作.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 回答