jQuery .ajax 不起作用，通过页面刷新形成帖子

Question

我有以下 html 代码：（通过 ajax 加载到 div 中）

（剪掉不相关的部分）

<form id='addContactForm' method='post' action='/contact/create/'>
    <div>
        <input type="image" name="submit" id="addContactSubmit" src="/images/add-small.png" style="width: auto; vertical-align: bottom;">
    </div>
</form>

<script>
    $('#addContactSubmit').click(function () {
        alert('got here');
        $.ajax({
            type: 'POST',
            url: '/contact/create/',
            data: $("#addContactForm").serialize(),
            success: function (data, status, xhttp) {
                if (data) {
                    alert('Got Data');
                } else {
                    alert('No Data');
                }
            },
            dataType: html
        });
        return false;
    });
</script>

所以现在当我单击 时，它实际上会发布表单并刷新页面。我读过另一篇文章，指出问题是 jquery 未加载，一旦加载就解决了问题。然而，在这种情况下，我收到警报，它告诉我 jquery 正在加载（因为单击事件触发正常），但是似乎 $.ajax 部分没有被执行（或者有问题）。如果我删除 $.ajax 部分，我会收到警报，并且页面不会提交和重新加载。

最初我说这个表单 html 是通过主页上的 ajax 调用加载的，我想知道这是否与失败的 ajax 帖子有关。请注意，我也从未收到警报（“有数据”）或（“无数据”），只有警报“到达这里”

任何现场都会很棒。谢谢

另一条注释，我在萤火虫中没有收到任何错误。

Answer 1

这是一个提交输入，它将自动回发表单并运行您的 ajax 脚本。

试试这个...

<script>
    $('#addContactSubmit').click(function (e) {
        e.preventDefault();
        alert('got here');
        $.ajax({
            type: 'POST',
            url: '/contact/create/',
            data: $("#addContactForm").serialize(),
            success: function (data, status, xhttp) {
                if (data) {
                    alert('Got Data');
                } else {
                    alert('No Data');
                }
            },
            dataType: html
        });
        return false;
    });
</script>

我所做的就是将单击事件传递给您的 jQuery 函数，然后调用 e.preventDefault() 停止执行默认的 DOM 单击事件，在本例中，提交按钮是回发。

希望这是有道理的，你说得非常对！