Question

民间，

我正在通过修补来学习Ajax。起初，我有一个带按钮的表单，它对一个虚拟控制器动作进行了Ajax调用。客户端的HTML和JavaScript。¹

<form method="post">
    <button name="btnSaveProject" title="When you save this project, it willl be available for 30 days.">
            Save
    </button>
</form>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
<script>
    $(document).ready(function () {
        $("button[name='btnSaveProject']").click(function () {
            console.log("make ajax call");
            $.ajax({
                url: "/Project/Save",
                type: "GET",
                timeout: 8000,
                cache: false
            }).done(function () {
                console.log("ajax call successful");
            }).fail(function (jqXHR, textStatus) {
                console.log("something went awry. " + textStatus);
            }).then(function () {
                console.log("always just in case");
            });
        });

    });
</script>

点击按钮时发生了一件奇怪的事情。 Ajax调用将到达服务器（我知道因为我在控制器动作中有一个断点，触发了）。但是，.done()，.fail()和.always()都没有被客户端回叫。

然后我已将<button>移出<form>，现在.done()，.always()按预期回复。可以在Ajax调用之间进行一些相互作用。这种相互作用是什么？我在哪里可以了解更多信息？我需要做些什么才能在<form>中使用Ajax？

这是服务器端代码，但我怀疑这是一个非因素。

// AJAX: /Project/Save
public ActionResult Save() {
    System.Threading.Thread.Sleep(600);     /// <bring-up>A bit of latency to make the Ajax call more noticeable.</bring-up>
    return Json("lorem ipsum", JsonRequestBehavior.AllowGet);
}

¹ _{我已经删除了代码，只保留了我认为适用于该问题的部分。如果我已经删除了太多，请告诉我：我会发布更多代码。}

Answer 1

由于按钮处于表单中，其默认单击操作是提交表单，因此在您的情况下，一旦发送了ajax请求，就会提交实际页面，我认为正在重新加载页面，导致回调处理程序卸载这就是为什么那些没有被称为

一种解决方案是通过调用event.preventdefault()

来阻止点击事件的默认操作

 $(document).ready(function () {
    $("button[name='btnSaveProject']").click(function (e) {
        //prevent the default action of the button click which is to submit the form
        e.preventDefault()
        console.log("make ajax call");
        $.ajax({
            url: "/Project/Save",
            type: "GET",
            timeout: 8000,
            cache: false
        }).done(function () {
            console.log("ajax call successful");
        }).fail(function (jqXHR, textStatus) {
            console.log("something went awry. " + textStatus);
        }).then(function () {
            console.log("always just in case");
        });
    });

});

但由于您使用的是表单，而不是按钮点击事件，因此最好使用表单提交事件，例如

$(document).ready(function () {
    $("form").submit(function (e) {
        //prevent the default action of the button click which is to submit the form
        e.preventDefault()
        console.log("make ajax call");
        //your ajax code
    });

});

另一种选择是将按钮的类型设置为button，以便不会触发表单提交

<button type="button" name="btnSaveProject" title="When you save this project, it willl be available for 30 days.">Save</button>

Answer 2

您可以为按钮添加类型：

<button type="button" name="btnSaveProject"

或者只是阻止按钮的默认设置使用event.preventDefault()提交表单：

$("button[name='btnSaveProject']").click(function (e) {
    e.preventDefault();
    // other code as is
});

<form>和.ajax（）</form>之间的相互作用

2 个答案: