Question

我写了一些代码，其中一个html文件（file1.html）加载了另一个html文件（file2.html）。 file2.html（一个表单页面）包括一些小的PHP代码（调用session_start（）），一些表单字段和一些jquery javascript函数，包括$ .ajax（）函数，当输入输入时，该函数又调用php文件。当file1.html加载file2.html时，除了$ .ajax（）函数之外，file2.html的所有jquery javascript函数都执行得很好。当我在浏览器中加载file2.html（带有$ .ajax（））时，$ .ajax函数可以正常工作。然后我尝试通过将$ .ajax函数从file2.html移动到file1.html来解决问题，如下面的代码所示，但没有成功。

我哪里出错了？（我在http://api.jquery.com/load/查看并正在查看此网站，以帮助我找到正确的方向，但找不到类似的问题。

请你的帮助。

代码file1.html（带有$ .ajax函数从file2.html移出）

<script src="js/jquery-1.10.1.min.js"></script>

</head>
<body>

<script>
$(document).ready(function(){
    $("#myForm").submit(function(){

        $.ajax({
            type: "POST",
            url: "step2_submit2ajx.php",
            data: $("#myForm").serialize(),
            dataType: "json",

            success: function(msg){
                $("#formResponse").removeClass('error');
                $("#formResponse").addClass(msg.statusgeneral);
                $("#formResponse").html(msg.statusgeneral);


            },
            error: function(){
                $("#formResponse").removeClass('success');
                $("#formResponse").addClass('error');
                $("#formResponse").html("There was an error submitting    
 the form. Please try again.");
            }
        });

        //make sure the form doesn't post
        return false;

    }); //.ajax

});

</script>

<script>
$(document).ready(function(){
    $("#section1").load("file2.html");


});
$('#page1').show();
$('#page2').hide();
</script>

<div id="page1">
page 1
<div id="section1">

</div>
<button onclick="toPage2();" type="button">< to Page 2</button>
</div>

<div id="page2" style="display:none;">
page 2
<div id="section2">

</div>
<button onclick="backPage1();" type="button">< Back to Page 1</button>
</div>


<script>
function toPage2() {  
    $('#page2').show();
    $('#page1').hide();
}

function backPage1() {  
$('#page2').hide();
$('#page1').show();
}
</script>
</body>
</html>

Answer 1

根据您提交的代码，您遇到语法错误。

$("#formResponse").html("There was an error submitting    
  the form. Please try again.");

应该在一条线上或像这样分手：

$("#formResponse").html("There was an error submitting" +
" the form. Please try again.");

这可以防止您通过绑定提交事件回调。 [编辑：因为JavaScript引擎无法运行您包含的代码块]

因为它不是语法错误...如果您要加载包含表单的file2.html，但是绑定到提交位于file1.html中，则表单尚不存在以绑定到。等到file2.html加载，然后尝试在{1}中使用jQuery('#myForm').submit进行定时等待，或者只在file2.html中使用.ajax处理程序包含脚本标记

Matt Whipple提醒我......你也可以这样做：

<script>
$(document).ready(function(){
    $("#section1").load("file2.html", function(){
    $("#myForm").submit(function(){

        $.ajax({
            type: "POST",
            url: "step2_submit2ajx.php",
            data: $("#myForm").serialize(),
            dataType: "json",

            success: function(msg){
                $("#formResponse").removeClass('error');
                $("#formResponse").addClass(msg.statusgeneral);
                $("#formResponse").html(msg.statusgeneral);


            },
            error: function(){
                $("#formResponse").removeClass('success');
                $("#formResponse").addClass('error');
                $("#formResponse").html("There was an error submitting the form. Please try again.");
            }
        });

        //make sure the form doesn't post
        return false;

    }); //.ajax
   }); //end anonymous success
});
</script>

一旦表单成功加载到页面中，您就可以将提交回调绑定。

jquery .load不执行$ ajax函数

1 个答案: