在ajax调用之后，jquery何时真正更新输入字段中的值？

我使用jquery通过ajax请求检索用于填充输入字段的许多值。 在检索这些字段之后，我需要在另一个ajax调用中使用它们的新值，但是我看到我得到了在ajax调用之前字段中的值

$("#clickme").function(e) {
   e.preventDefault()
   retrieveValues()
   compareValues()
}

function retrieveValues {
    paramList = {}

    ..... snip .....

    $.ajax({
    url: myControllerAction,
        type: "POST",
        dataType: "json",
        data: JSON.stringify(paramList),
        contentType: "application/json; charset=utf-8",
        success: function (result) {
                $("#myFieldOne").val(result["myFieldOne"]);
                $("#myFieldOne").val(result["myFieldOne"]);
                $("#myFieldThree").val(result["myFieldThree"]);
            }
        },
        error: function () {
            alert("error");
        }
    });

function compareValues {
    paramList = {}
    paramList["myFieldOne"] = $("#myFieldOne").val();
    paramList["myFieldTwo"] = $("#myFieldTwo").val();
    paramList["myFieldThree"] = $("#myFieldThree").val();
    paramList = {}

    ..... snip ....

    $.ajax({
    url: myOtherControllerAction,
        type: "POST",
        dataType: "json",
        data: JSON.stringify(paramList),
        contentType: "application/json; charset=utf-8",
        success: function (result) {

            .....
            some Business Logic
            .....

            }
        },
        error: function () {
            alert("error");
        }
    });
}

在点击“点击我”之前，我已经

函数retrieveValues应该用新值“new Value#1”、“new Value#2”、“new Value#3”设置这三个字段

从retrieveValues（）返回后，我调用compareValues（），但Jquery对象仍然包含默认值。我认为字段值实际上只有在单击事件结束后才会更改。 函数compareValues（）在第一次单击时发送错误的数据，值比较错误，然后如果我再次单击“clickme”，值比较正确

有没有办法纠正这个问题，让jquery动态识别输入字段中的新值

---

Francesco

这个问题是由于来自ajax调用的异步响应造成的。在另一个函数获取值时，ajax调用不会返回更新的值，因此会读取过时的值

解决此问题的一种方法是使调用同步：

$.ajax({
    url: myControllerAction,
        type: "POST",
        dataType: "json",
        async:false,
         --- rest of the code ----

---

这是因为Ajax调用是异步的。因此，调用compareValues时，retrieveValues尚未完成

$("#clickme").function(e) {
   e.preventDefault();
   retrieveValues(); // just called, ajax not finished
   compareValues(); // called right after retrieveValues
}

您可以更改代码，以便retrieveValues返回一个

承诺

function retrieveValues {
    paramList = {}

    ..... snip .....
    // RETURN an Ajax Promise
    return $.ajax({
    url: myControllerAction,
        type: "POST",
        dataType: "json",
        data: JSON.stringify(paramList),
        contentType: "application/json; charset=utf-8",
        success: function (result) {
                $("#myFieldOne").val(result["myFieldOne"]);
                $("#myFieldOne").val(result["myFieldOne"]);
                $("#myFieldThree").val(result["myFieldThree"]);
            }
        },
        error: function () {
            alert("error");
        }
    });
}

现在，您可以对retrieveValues的返回值使用

.done（）

retrieveValues().done(function() { compareValues(); });

---

默认情况下，Ajax调用是异步的。要在

retrieveValues

之后使用

compareValues

函数，可以在retrieve中的成功处理程序中调用

compareValues

，或者通过设置ajax选项

async:false

使

retrieveValues

同步（默认值为：

true

）

示例1：使用回调函数

function retrieveValues (callback) {
    paramList = {}

    ..... snip .....

    $.ajax({
    url: myControllerAction,
        type: "POST",
        dataType: "json",
        data: JSON.stringify(paramList),
        contentType: "application/json; charset=utf-8",
        success: function (result) {
                $("#myFieldOne").val(result["myFieldOne"]);
                $("#myFieldOne").val(result["myFieldOne"]);
                $("#myFieldThree").val(result["myFieldThree"]);

                //CALL callback function.
                if(typeof callback === 'function') callback();
            }
        },
        error: function () {
            alert("error");
        }
    });

}

示例2：将ajax选项

async

设置为

false

function retrieveValues () {
paramList = {}

..... snip .....

$.ajax({
url: myControllerAction,
    type: "POST",
    async:false //SET ASYNC TO FALSE
    dataType: "json",
    data: JSON.stringify(paramList),
    contentType: "application/json; charset=utf-8",
    success: function (result) {
            $("#myFieldOne").val(result["myFieldOne"]);
            $("#myFieldOne").val(result["myFieldOne"]);
            $("#myFieldThree").val(result["myFieldThree"]);
        }
    },
    error: function () {
        alert("error");
    }
});

---

Ajax是异步的，一旦Ajax完成，您应该调用

compareValues（）

，例如从Ajax成功调用回调Ajax调用是异步的。。因此，当您运行

compareValues

时，来自

retrieveValues

的ajax调用尚未完成，因此您仍然可以在字段中看到旧值。我接受在成功处理程序中调用compareValues的解决方案。无论如何，我并不完全理解ajax调用的“异步性”。如果我在Chrome中调试整个过程，我可以看到字段值只有在退出“单击”处理程序后才被填充；所以看起来它实际上是同步的，事情只发生在最后，而不是“一旦ajax调用完成”。。。如何解释这一点？

function retrieveValues () {
paramList = {}

..... snip .....

$.ajax({
url: myControllerAction,
    type: "POST",
    async:false //SET ASYNC TO FALSE
    dataType: "json",
    data: JSON.stringify(paramList),
    contentType: "application/json; charset=utf-8",
    success: function (result) {
            $("#myFieldOne").val(result["myFieldOne"]);
            $("#myFieldOne").val(result["myFieldOne"]);
            $("#myFieldThree").val(result["myFieldThree"]);
        }
    },
    error: function () {
        alert("error");
    }
});