jquery——成功时使用ajax返回值-jquery-returnvalueusingajaxresultonsuccess

89  

The trouble is that you can not return a value from an asynchronous call, like an AJAX request, and expect it to work.

问题在于，您无法从异步调用(如AJAX请求)返回值，并期望它能够工作。

The reason is that the code waiting for the response has already executed by the time the response is received.

原因是等待响应的代码在接收响应时已经执行。

The solution to this problem is to run the necessary code inside the success: callback. That way it is accessing the data only when it is available.

这个问题的解决方案是在success: callback中运行必要的代码。这样，它只能在数据可用时访问数据。

function isSession(selector) {
    $.ajax({
        type: "POST",
        url: '/order.html',
        data: ({ issession : 1, selector: selector }),
        dataType: "html",
        success: function(data) {
            // Run the code here that needs
            //    to access the data returned
            return data;
        },
        error: function() {
            alert('Error occured');
        }
    });
}

Another possibility (which is effectively the same thing) is to call a function inside your success: callback that passes the data when it is available.

另一种可能性(实际上是相同的事情)是在success中调用一个函数:回调，在数据可用时传递数据。

function isSession(selector) {
    $.ajax({
        type: "POST",
        url: '/order.html',
        data: ({ issession : 1, selector: selector }),
        dataType: "html",
        success: function(data) {
                // Call this function on success
            someFunction( data );
            return data;
        },
        error: function() {
            alert('Error occured');
        }
    });
}

function someFunction( data ) {
    // Do something with your data
}

27  

There are many ways to get jQuery AJAX response. I am sharing with you two common approaches:

有很多方法可以获得jQuery AJAX响应。我想和大家分享两个常见的方法:

First:

第一:

use async=false and within function return ajax-object and later get response ajax-object.responseText

使用async=false，并在函数中返回ajax-object，然后获取响应ajax-object. responsetext

/**
 * jQuery ajax method with async = false, to return response
 * @param  {mix}  selector - your selector
 * @return {mix}           - your ajax response/error
 */
function isSession(selector) {
    return $.ajax({
        type: "POST",
        url: '/order.html',
        data: {
            issession: 1,
            selector: selector
        },
        dataType: "html",
        async: !1,
        error: function() {
            alert("Error occured")
        }
    });
}
// global param
var selector = !0;
// get return ajax object
var ajaxObj = isSession(selector);
// store ajax response in var
var ajaxRespOnse= ajaxObj.responseText;
// check ajax response
console.log(ajaxResponse);
// your ajax callback function for success
ajaxObj.success(function(response) {
    alert(response);
});

Second:

第二:

use $.extend method and make a new function like ajax

使用美元。扩展方法并创建一个新的函数，如ajax

/**
 * xResponse function
 *
 * xResponse method is made to return jQuery ajax response
 * 
 * @param  {string} url   [your url or file]
 * @param  {object} your ajax param
 * @return {mix}       [ajax response]
 */
$.extend({
    xResponse: function(url, data) {
        // local var
        var theRespOnse= null;
        // jQuery ajax
        $.ajax({
            url: url,
            type: 'POST',
            data: data,
            dataType: "html",
            async: false,
            success: function(respText) {
                theRespOnse= respText;
            }
        });
        // Return the response text
        return theResponse;
    }
});

// set ajax response in var
var xData = $.xResponse('temp.html', {issession: 1,selector: true});

// see response in console
console.log(xData);

you can make it as large as you want...

你可以把它做成你想要的大小……

5  

I saw the answers here and although helpful, they weren't exactly what I wanted since I had to alter a lot of my code.

我在这里看到了答案，虽然很有帮助，但它们并不是我想要的，因为我必须修改我的很多代码。

What worked out for me, was doing something like this:

对我有用的是，做这样的事情:

function isSession(selector) {
    //line added for the var that will have the result
    var result = false;
    $.ajax({
        type: "POST",
        url: '/order.html',
        data: ({ issession : 1, selector: selector }),
        dataType: "html",
        //line added to get ajax response in sync
        async: false,
        success: function(data) {
            //line added to save ajax response in var result
            result = data;
        },
        error: function() {
            alert('Error occured');
        }
    });
    //line added to return ajax response
    return result;
}

Hope helps someone

希望能帮助一些人

anakin

阿纳金

3  

Add async: false to your attributes list. This forces the Javascript thread to wait until the return value is retrieved before moving on. Obviously, you wouldn't want to do this in every circumstance, but if a value is needed before proceeding, this will do it.

向属性列表中添加async: false。这迫使Javascript线程在获取返回值之前等待。显然，您不会希望在每种情况下都这样做，但是如果在继续之前需要一个值，那么这就可以了。

2  

This is quite old, and ugly, don't do this. You should use callbacks: https://stackoverflow.com/a/5316755/591257
Had same problem, solved it this way, using a global var. Not sure if it's the best but surely works. On error you get an empty string (myVar = ''), so you can handle that as needed.

这太老了，太丑了，别这样。您应该使用回调:https://stackoverflow.com/a/5316755/591257有同样的问题，用这个方法解决它，使用一个全局变量。不确定它是否是最好的，但肯定有效。在错误中，您得到一个空字符串(myVar = ")，因此您可以根据需要处理它。

var myVar = '';
function isSession(selector) {
  $.ajax({
    'type': 'POST',
    'url': '/order.html',
    'data': {
      'issession': 1,
      'selector': selector
    },
    'dataType': 'html',
    'success': function(data) {
      myVar = data;
    },
    'error': function() {
      alert('Error occured');
    }
  });
  return myVar;
}

1  

// Common ajax caller
function AjaxCall(url,successfunction){
  var targetUrl=url;
  $.ajax({
    'url': targetUrl,
    'type': 'GET',
    'dataType': 'json',
    'success': successfunction,
    'error': function() {
      alert("error");
    }
  });
}

// Calling Ajax
$(document).ready(function() {
  AjaxCall("productData.txt",ajaxSuccessFunction);
});

// Function details of success function
function ajaxSuccessFunction(d){
  alert(d.Pioneer.Product[0].category);
}

it may help, create a common ajax call function and attach a function which invoke when success the ajax call, see the example

创建一个通用的ajax调用函数并附加一个在ajax调用成功时调用的函数，这可能会有所帮助，请参见示例

0  

Hi try async:false in your ajax call..

尝试异步:在ajax调用中错误。