Question

您好，感谢您的阅读！

首先要做的事情，所以这是我的设置：

index.php - 使用

将内容加载到div中

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

stuff.php - 在<head>部分中包含表单和脚本。

这是剧本：

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。

此外，我想知道如果脚本位于<head>的{{1}}部分，脚本无法正常工作。

要点：

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

Answer 1

p5-content元素位于层次结构中的哪个位置？如果<form>是p5内容的子元素，那么您的原始表单（您为其指定了提交处理程序）将替换为新的，相同的<form>，它没有任何提交处理程序与之相关。这可以解释为什么它会发布整个页面，因为e.preventDefault();不再被调用。

要解决此问题，请找到一种不用您的ajax调用替换整个<form>的方法。这样做会更好，因为这意味着你每次ajax回发都会发送更少的数据。或者，如果您真的必须替换整个<form>，请在ajax回调结束时重新添加提交事件处理程序。

至于为什么你的脚本在<head>中不起作用，可能是因为你的脚本在包含jQuery之前运行（我不知道你在哪里包括jQuery）。由于HTML解析器在等待加载脚本时会阻塞，因此您可能希望在<body>的末尾加载所有脚本，以加快内容加载速度。您也可以使用this post中所述的async属性，但这并不能保证您的脚本会以正确的顺序加载，因此我不建议您使用它。或者，如果您真的关心优化加载时间并希望进行一些工作，请查看this article。

提交两次时Ajax无法正常工作

1 个答案: