jQuery-成功使用Ajax结果返回值

Question

我有一个jQuery $ .ajax（）函数的小问题。我有一个表单，其中每次单击单选按钮或从下拉菜单中进行选择都会创建具有所选值的会话变量。现在-我有一个下拉菜单，其中有4个选项-第一个菜单（标签为None）具有value =“”，其他具有其ID。我要执行的操作是使用None选项（具有空白值）删除会话，并使用其他选项创建会话，但前提是不存在具有该特定选择名称的会话-因为所有其他选项均分配有相同的金额-只是表明选择了哪一个。我不确定这是否有意义-但请看一下代码-也许可以使它更清晰：$("#add_ons select").change(function() {        // get current price of the addons        var order_price_addon = $(".order_price_addon").text();        // get price of the clicked radio button from the rel attribute        var add = $(this).children('option').attr('label');        var name = $(this).attr('name');        var val = $(this).val();        if(val == "") {            var price = parseInt(order_price_addon) - parseInt(add);            removeSession(name);        } else {            if(isSession(name) == 0) {                var price = parseInt(order_price_addon) + parseInt(add);            }               setSession(name, val);                      }        $(".order_price_addon").html(price);            setSession('order_price_addon', price);                 updateTotal();});因此-首先，当#add_ons选择菜单触发“更改”时，我们将从一些元素中获取一些值进行计算。我们从选择中获取选项的标签属性，该选择存储将要添加到总数中的值，选择的名称（使用此名称创建会话）和值，以供以后检查选择了哪个。现在-我们检查val ==“”（这表明已选择“无”选项），然后从总数中扣除金额，并删除带有选择名称的会话。在这之后，问题开始了-else语句。否则-我们要检查具有选择器名称的isSession（）函数是否返回0或1-如果返回0，则将存储在label属性中的值加到总计中，但是如果返回1-这将表明该会话已经存在-那么我们只能通过重新创建来更改此会话的值-但不会添加该金额。现在，isSession函数如下所示：function isSession(selector) {    $.ajax({        type: "POST",        url: '/order.html',        data: ({ issession : 1, selector: selector }),        dataType: "html",        success: function(data) {            return data;        },        error: function() {            alert('Error occured');        }    });}现在-问题是-我不知道使用“ return”是否会从函数中返回结果-因为它似乎不起作用-但是，如果我将“ data”放在success：部分中，警报-它似乎返回正确的值。有谁知道如何从函数中返回值，然后在下一条语句中进行比较？然后updateResult（）函数：函数updateResult（data）{结果=数据；}但由于某种原因-它不起作用-任何想法？

Answer 1

问题是您不能从异步调用（如AJAX请求）返回值，并且期望它能正常工作。

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

解决此问题的方法是在回调内部运行必要的代码success:。这样，它data只有在可用时才能访问。

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');

        }

    });

}

另一种可能性（实际上是同一件事）是在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

}

Answer 2

有很多方法可以获取jQuery AJAX响应。我将与您分享两种常用方法：

第一：

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

});

第二：

使用$ .extend 方法并创建一个像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);

您可以根据需要将其放大...

Answer 3

我在这里看到了答案，尽管有帮助，但它们并不是我想要的，因为我不得不更改很多代码。

对我有用的事情是在做这样的事情：

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;

}

希望可以帮助某人