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>

所以现在当我点击<image>时，它实际上发布了表单并刷新了页面。我读了另一篇帖子，说明问题是没有加载jquery，一旦加载就修复了问题。但是，在这种情况下，我收到警报，告诉我jquery正在加载（因为click事件触发正常），但似乎$.ajax部分没有被执行（或者有问题它）。如果我删除$.ajax部分，则会收到提醒，并且页面不会提交并重新加载。

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

任何insite都会很棒。感谢

另一个注意事项，我在萤火虫中没有错误。

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>

我所做的就是将click事件传递给你的jQuery函数，然后调用e.preventDefault（）来停止执行默认的DOM click事件，在这种情况下，提交按钮就是回发。

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

jQuery .ajax不工作，用页面刷新形成帖子

1 个答案: