從jQuery執行同步Ajax請求？

Question

我知道這聽起來像以前被問過的東西，但是對於我所有的狩獵，我找不到任何與我正在尋找的東西相匹配的東西。

我正在開發一個基於Ajax的項目。 我正在使用jQuery，但即使它使用精美的簡化代碼，當我已經達到代碼完全相同時，它仍然很混亂，除了通過data字段傳遞的單個命令。

所以我嘗試在處理函數中設置它，如下所示：

function _call(task, opts, async) {
    if(typeof async !== "boolean") { async = true; }
    opts = $.extend({}, opts, options);
    $.ajax({
        url: "myphpfile.php",
        dataType:"JSON",
        type:"POST",
        async:async,
        data: { task: task, opts: opts }
    }).done(function(data) { return data; });
}

對於那些閱讀過的人，您會注意到有一個var， options ，在示例中尚未定義。 它實際上已被分配，為了清楚起見，它被省略了。

我開始意識到這不起作用，因為即使它被設置為async: false ，代碼仍然在調用_call(...)后繼續，因此無法及時獲得結果。 我嘗試了一些不同的變體，包括將匿名函數傳遞給處理程序，然后將其用作.done()函數，但它不會與外部變量交互，從而無法實現目的。

我正在尋找的是一個讓我使用它的系統：

var returnedData = _call("thisismytask");
var returnedDataWithOptions = _call("thisisanothertask", {'option': 'option1'});

我真的希望這是可能的。 我確信它會是，因為函數的主要目的是消除不必要的重復代碼的需要。

謝謝。 :)

Answer 1

你可以這樣做：

function _call(task, opts) {
    opts = $.extend({}, opts, options);
    return $.ajax({
        url: "myphpfile.php",
        dataType:"JSON",
        type:"POST",
        data: { task: task, opts: opts }
    });
}

它不需要將回調傳遞給_call ，但功能完全相同。

_call("thisisanothertask", {'option': 'option1'}).then(function(data) {
  // function body here
});

Answer 2

你最好這樣做

function _call(task, opts, callback) {
    opts = $.extend({}, opts, options);

    $.ajax({
        url: "myphpfile.php",
        dataType:"JSON",
        type:"POST",
        data: { task: task, opts: opts }
    }).done(function(data) { callback(data); });
}

像這樣用

_call("thisisanothertask", {'option': 'option1'}, function(data) {
   //do things with data
});

你不能真的這樣做，因為_call不能立即返回，因為它可能需要一段時間才能獲得響應，即使你可以鎖定你的瀏覽器這是不好的。

var returnedData = _call("thisismytask");
var returnedDataWithOptions = _call("thisisanothertask", {'option': 'option1'});

你需要像這樣使用它：

_call("thisismytask", null, function(returnedData) {
   //use returnData
});

_call("thisisanothertask", {'option': 'option1'}, function(returnedDataWithOptions) {
  //use returnedDataWithOptions
});

如果您在此之前需要thisismytask的結果，則必須執行以下操作：

_call("thisismytask", null, function(returnedData) {

   _call("thisisanothertask", {'option': 'option1'}, function(returnedDataWithOptions) {
     //use returnData

     //use returnedDataWithOptions
   });

});

Answer 3

你應該使用回調。 您也不應該使用async: false因為這將阻止瀏覽器中的UI線程。 您可以使用jQuery.when()來同步您的各種任務。 首先像這樣改變你的方法：

function _call(task, opts) {
    opts = $.extend({}, opts, options);
    return $.ajax({
        url: "myphpfile.php",
        dataType:"JSON",
        type:"POST",
        data: { task: task, opts: opts }
    });
}

現在你可以像這樣調用它：

$.when(
    _call("thisismytask"),
    _call("thisisanothertask", {'option': 'option1'})
).done(function(firstCallResults, secondCallResults) {
    //*CallResults is an array with the following structure: [data, statusText, jqXHR]
    var returnedData = firstCallResults[0];
    var returnedDataWithOptions = secondCallResults[0];
    ...
});

這樣你就可以保持AJAX異步性的所有好處（這些任務將並行運行，除非服務器不支持它），並在它們全部可用時將結果重新組合在一起。

Answer 4

我找到了解決方案。 @Slavo向我指出。

https://stackoverflow.com/a/6685294/563460
當您正在進行同步請求時，應該是這樣

function getRemote() {
     return $.ajax({
         type: "GET",
         url: remote_url,
         async: false,
     }).responseText; }

示例 - http://api.jquery.com/jQuery.ajax/#example-3

現在我只需要從文本解碼到正確的JSON。 謝謝大家。 :)

Answer 5

使用jQuery的語法 - 它對我有用，

$.ajaxSetup({async: false});