Question

我使用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");
        }
    });
}

点击＆＃34; clickme＆＃34;我有

<input name="myFieldOne" id="myFieldOne" value="default value #1">
<input name="myFieldTwo" id="myFieldTwo" value="default value #2">
<input name="myFieldThree" id="myFieldThree" value="default value #3">

和函数retrieveValues应该用新值设置这三个字段＆＃34;新值＃1＆＃34;，＆＃34;新值＃2＆＃34;，＆＃34;新值＃3＆＃34;

从retrieveValues（）返回后，我调用compareValues（），但Jquery对象仍然包含默认值。我似乎只在click事件结束后才更改字段值。函数compareValues（）在第一次单击时发送错误的数据，比较错误的值，然后如果我再次点击＆＃34; clickme＆＃34;价值比较正确。

有没有办法纠正这个问题并让jquery在输入字段中即时识别我的新值？

弗朗西斯

Answer 1

默认情况下，Ajax调用是异步的。要在compareValues之后使用retrieveValues功能，您可以在检索中通过成功处理程序调用{{1}}，或通过设置ajax选项compareValues使retrieveValues同步（默认为：{ {1}}）

示例1：使用回调函数

async:false

示例2：将ajax选项true设置为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"); } }); }

async

Answer 2

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

解决此问题的一种方法是使呼叫同步：

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

Answer 3

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

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

您可以更改代码，以便retrieveValues返回Promise。

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(); });

当jquery在ajax调用后真的更新输入字段中的值时？

3 个答案: