Question

我有一个功能：

function add() {
    $.ajax({
        type: "POST",
        url: "add.php",
        async: "false", // Tried both- async: "false/true"
        data: {
            name: 'Test',
        },
        success: function(data) {
            document.getElementById('id').value = data;
            id = document.getElementById('id').value;
            alert(id); // alerts here proper value
        }
    });

}

function testMyFunction() {
    add();

    // 'id' was set in add function.
    id = document.getElementById('id').value;
    alert(id); // Here does not alert value but blank(no value)
    // This 'id' value is used at other place but here is issue. 
}

调用testMyFunction（）函数给出了上述问题。

可能是什么问题？

Answer 1

$ .ajax是一个异步调用，它会更新＆＃34; id＆＃34;完成之后的字段。您的代码在调用之后立即检查函数testMyFunction（）中的值（在成功之前：调用函数（数据））。

Answer 2

JavaScript是一种异步语言。简而言之，这意味着您的代码应 NEVER 阻止：函数应立即完成或稍后调用，即在某些输入/输出操作完成后（例如AJAX请求）。

编辑： BTW，您的代码无效，因为即使使用async: false，事件循环中也会调用success函数，因此即使在同步AJAX之后的代码之后也会发生。如果您使用async: true，AJAX将会阻止，但success函数在任何情况下都将被称为异步。因此，要同步处理数据，您必须不使用success函数，而是使用$.ajax()调用返回的对象：

var xhr = $.ajax({
    type: "POST",
    async: false,
    url: "add.php",
    data: {
        name: 'Test',
    },
});
alert(xhr.responseText); // Alerts result

因此，您应永远使用async: false。相反，更好地重构您的代码：

function add(callback) {
    $.ajax({
        type: "POST",
        url: "add.php",
        data: {
            name: 'Test',
        },
        success: callback
    });
}

function testMyFunction() {
    add(function(data) {
        // This closure will be called AFTER the request is complete.
        document.getElementById('id').value = data;
        alert(data); // Alerts proper value.
    });
}

基本上，这个伪代码是错误的：

result1 = action1();
result2 = action2(result1);
result3 = action3(result2);

......应该这样写：

action1(function(result1) {
    action2(result1, function(result2) {
        alert(action3(result2));
    });
});

javascript更新隐藏值

2 个答案: