Javascript 提交两次时Ajax不起作用

您好，谢谢您的阅读

首先，我的设置如下：

• php-使用

  jq('#p5-content').load('content/stuff.php');
  

• stuff.php-在其
  部分中包含一个表单和一个脚本

以下是脚本：

var jq = $.noConflict();
jq(function () {

    jq('form').on('submit', function (e) {

        e.preventDefault();

        var page = jq(this).attr("page");

        jq.ajax({
            type: jq(this).attr("method"),
            url: jq(this).attr("action"),
            data: jq(this).serialize(),
            success: function (data) {
                jq('#' + page + '-content').html(data);
            }
        });

    });

});

表格如下：

<form action="content/stuff.php" method="post" page="p5">
    <input type="hidden" name="p5-submit-1" />
    <input type="image" style="margin-top: 20px;" src="images/send.png" />
</form>

我遇到了这样一个问题：有时单击发送按钮时，整个页面被重定向到

content/stuff.php

，有时只有div中想要的内容（

p5 content

）响应表单。我只想替换

p5 content

的内容

另外，当它工作时，不同的内容被加载到包含另一个（类似）表单的

p5 content

中，当单击第二个表单时，整个页面将更改为

content/stuff.php

此外，我想知道，如果脚本位于我的

index.php

的

部分，为什么脚本不起作用

总结：

• 如果脚本位于index.php中，那么它应该可以工作
• 脚本应该始终有效，而不仅仅是有时（通常只有在重新加载页面后才有效）
• 在ajax的响应区域内提交第二个表单时，响应应该再次位于div内

---

p5内容元素在您的层次结构中位于何处？如果

是p5内容的子元素，那么您的原始表单（您为其分配了提交处理程序）将被替换为新的、相同的

，该表单没有绑定任何提交处理程序。这可以解释为什么它会发布整个页面，因为

e.preventDefault（）不再被调用

要解决这个问题，请找到一种方法，不要用ajax调用替换整个
。无论如何，这更好，因为这意味着每次ajax回发发送的数据更少。或者，如果确实必须替换整个
，请在ajax回调的末尾重新添加submit事件处理程序

至于为什么您的脚本在
中不起作用，可能是因为您的脚本在包含jQuery之前运行（我不确定您在哪里包含jQuery）。由于HTML解析器在等待加载脚本时会阻塞，因此您可能希望在
末尾加载所有脚本，以加快内容加载速度。您还可以使用中所述的
async
属性，但这不能保证您的脚本将以正确的顺序加载，因此我不建议在您的情况下使用它。或者，如果您真的关心优化加载时间并想投入一些工作，请查看。
@aj-r我的代码如下：
，提交表单1后，它如下所示：
。我现在试着不替换表单，然后我会回来报告。另外，我仔细检查并确保jquery肯定会在脚本本身之前被包含。我将阅读你的链接文章-我非常高兴，谢谢：）@aj-r真棒你帮了我很多！我现在将
包裹在div周围，它就像一个符咒！下一步，我将尝试将脚本放置在其他位置，并让您随时发布。@aj-r好的，现在一切正常！我正在异步加载部分脚本，表单也工作得很好。非常感谢。伟大的很高兴能帮忙：）