-1

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

在点击“clickme”之前，我有

<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 应该用新值“新值#1”、“新值#2”、“新值#3”设置这三个字段。

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

有什么方法可以纠正这个问题并让 jquery 即时识别我在输入字段中的新值？

弗朗切斯科

4

3 回答 3

2

默认情况下，Ajax 调用是异步的。在您可以通过设置 ajax 选项调用成功处理程序检索或同步后使用您的compareValues函数（默认为：）retrieveValuescompareValuesretrieveValuesasync:falsetrue

示例 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");
    }
});
于 2014-05-26T10:19:21.017 回答
0

那是因为 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");
        }
    });
}

现在您可以.done()在retrieveValues 的返回值上使用。

retrieveValues().done(function() { compareValues(); });
于 2014-05-26T10:18:57.870 回答
0

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

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

$.ajax({
    url: myControllerAction,
        type: "POST",
        dataType: "json",
        async:false,
         --- rest of the code ----
于 2014-05-26T10:18:35.413 回答