jquery - Ajax 函数在提交的表单中不起作用

Question

例如，当我提交表单时，我想使用 $.getJson 从服务器获取数据。

我写了这个：

$(function () {
    $('#websiteForm').submit(function (event) {
        $.getJSON('Home/checker', function (data) {
            alert(data);
        });
    });
})

我的表格：

<form action="" method="post" id="websiteForm">
    <input type="text" name="txtWebsite" id="txtWebsite" />
    <input type="submit" name="submit" />
</form>

但是当我点击提交表单时，什么也没有出现。我$.getJSON在页面加载时测试了我的功能，效果很好，所以我不知道为什么这个功能不起作用。

Answer 1

这应该使它工作

$(function () {
    $('#websiteForm').submit(function (event) {
        $.getJSON('Home/checker', function (data) {
            alert(data);
        });
        return false;
    });
});

没有return false;您提交停止 javascript 的表单（页面重新加载）

Answer 2

用按钮替换类型提交。

    $(function () {
        $('button').click(function (event) {
            $.getJSON('Home/checker', function (data) {
                alert(data);
            });
        });
    })

<form action="" method="post" id="websiteForm">
<input type="text" name="txtWebsite" id="txtWebsite" />
<input type="button" name="button" />
</form>

或者

$(function () {
        $('#websiteForm').submit(function (event) {
            $.getJSON('Home/checker', function (data) {
                alert(data);
            });
            return false;
        });
    })

<form action="" method="post" id="websiteForm">
<input type="text" name="txtWebsite" id="txtWebsite" />
<input type="submit" name="submit" />
</form>