0

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

我哪里错了？（我在http://api.jquery.com/load/上进行了检查，并正在查看该站点以使我朝着正确的方向前进，但找不到类似的问题。

请您的帮助。

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

<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>
4

1 回答 1

0

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

$("#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在尝试使用jQuery('#myForm').submitfile1 中的定时等待或仅在 .ajax 处理程序中包含脚本标记之前等待加载file2.html

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>

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

于 2013-07-13T19:11:40.667 回答