jQuery处理Ajax对象之外的Ajax响应

Question

我正在与jQuery合作，我需要处理Ajax对象外的AJAX调用期间收集的数据：

function getData(yt_url) {
    $.ajax({
        type: "GET",
        url: yt_url,
        dataType: "jsonp",
        success: function(response) {
            //   Return response here //
        },
        error: function(request, status, error) {
            alert(status);
        }
    });
}

我想调用函数getData并在AJAX成功函数中接收响应对象。

我尝试添加一些回报，然后我当然意识到这是一个对象。

Answer 1

ajax是异步的，这基本上意味着它不会阻止脚本的执行（这是好的，因为您的网站不会在负载时冻结）。

return像您所做的那样的值是同步的，它与ajax不相容。

一种解决方案是将回调函数传递到getData中，该函数在AJAX请求完成时被调用：

function getData(yt_url, callback) {
    $.ajax({
        type: "GET",
        url: yt_url,
        dataType: "jsonp",
        success: callback,
        error: function(request, status, error) {
            alert(status);
        }
    });
}​

然后您可以这样使用：

getData('http://www.example.com/', function(response) {
    alert('The response was: ' + response);
});

Answer 2

您可以尝试这样的东西 - 添加一个全局变量，该变量将存储AJAX调用的结果，例如

var ajaxResult = null;

将ajax的 async 属性设置为 false ，然后写下这样的东西：

var ajaxResult = null;
function getData(yt_url){
$.ajax
        ({
            type: "GET",
                        url: yt_url,
                        dataType:"jsonp",
                        async: false,
                        success: function(response){
                            ajaxResult = response; 
                        },error:function (request, status, error)           
});

}

getData（yt_url）;//调用功能尝试获得结果if（ajaxresult！= null）{//如果在AJAX调用期间获得了一些结果

    // do something with the result

}

Answer 3

由于Ajax是异步的，因此您应该重组代码以在回调函数中接收数据。每当请求完成后，您就可以继续使用数据进行任何操作。一个例子：

$.ajax {
    type: "GET",
    url: url,
    dataType:"jsonp",
    success: success,
    error: error
};
function success(data) {
    // continue your work here.
}
function error(request, status, error) {
    // handle any errors here.
}

我不建议使用async: false，因为它会冻结浏览器，直到完成您的请求，而通常您可能希望它在处理您的代码时保持响应速度。

Answer 4

我不知道这适合你们中的任何一个，但是我所做的是，我将响应数据存储在浏览器的" localsotrage"中，后来使用了" localsotrage"其他常规JavaScript功能中的数据！如果达到您的目的，请尝试一下！

也让我知道，如果这种方法有一些负面影响！

Answer 5

jquery ajax默认情况下是异步。使用async：false禁用它。

    function getData(yt_url){
        var data;
        $.ajax
        ({
            type: "GET",
                        async: false,
                        url: yt_url,
                        dataType:"jsonp",success: function(response){
                            //   Return response here //
                            // init data variable
                        },error:function (request, status, error) {alert(status);}
                    });
         return data;
   }

Answer 6

您也可以使get-功能异步并使用await等待响应：

async function getData(yt_url, callback) {
    return await $.ajax({
        type: "GET",
        url: yt_url,
        dataType: "jsonp",
        success: callback,
        error: function(request, status, error) {
            alert(status);
        }
    });
}​
getData().then(response => console.log(response)); // `getData` will return a promise
// But you can use await for `getData()` in another `async function`:
async function useData() {
    const data = await getData();
    console.log(data);
}