Home / Questions / 135181
Accepted
Lina Cortés
Asked: 2020-02-01 08:59:53 +0800 CST 2020-02-01 08:59:53 +0800 CST

Return AJAX response to another function

  • 772

I have two functions

First function:

sendRequest: function () { 
 jQuery.ajax({
        type: 'POST',
        url: xtremeSearchUrl,
        dataType: 'json',
        async: true,
        data: JSON.stringify(data),
        success: function (data) {
        data = this.searchBP();
        if (data == false) {

        }else{

        }
    },error{

    }});
    }

Second function:

searchBP: function () {
    var $url = "/bP";
    var $data = {url: window.location.pathname};
    jQuery.ajax({
        type: 'POST',
        url: $url,
        data: $data,
        success: function (result) {
            console.log(result);
            return true;
        },
        error: function (xhr, status, error) {
            console.log(xhr);
            console.log(status);
            console.log(error);
            return false;
        }
    });
}

I understand that ajax is executed asynchronously and by setting async to false it pauses the whole page, what I need to do is that when I call the searchBP() function nothing else is executed until it returns true or false and handle according to that response another block of code in sendRequest

javascript

2 Answers

  1. Best Answer

    Your function searchBPreturns nothing. When you do data = this.searchBP();data, it does not have the value with which it is resolved, searchBPit is simply undefined.

    The correct way would be to searchBPreturn a promise (jQuery.ajax returns promises)

    searchBP: function () {
    var $url = "/bP";
    var $data = {url: window.location.pathname};
    return jQuery.ajax({
        type: 'POST',
        url: $url,
        data: $data
     }).then(function (result) {
        console.log(result);
       return true;
     }).catch(function (err) {
        console.log(err.status);
        console.log(err.statusText);
        return false;
     });
}

    and then you could use it in sendRequestlike

    sendRequest: function () { 
  var _this = this; // para preservar la instancia de tu objeto
  jQuery.ajax({
        type: 'POST',
        url: xtremeSearchUrl,
        dataType: 'json',
        async: true,
        data: JSON.stringify(data),
        success: function (data) {
           _this.searchBP()
             .then(function(response) {
                if (response == false) {
                  console.log('searchBP es false');
                } else {
                  console.log('searchBP es true');    
                }
           });

    },error{

    }});
}

    However, you should get used to using thenand catchwhen executing jQuery.ajaxinstead of using successand errorwhich work as callbacks and do not adhere to the standard of using promises.

    note that catchit is used since jQuery 3. In jQuery 2.x it is used fail.

    • 2

  2. You already answered yourself. Do your first non-async function with async: false, it won't do the second one until success.

    sendRequest: function () { 
 jQuery.ajax({
        type: 'POST',
        url: xtremeSearchUrl,
        dataType: 'json',
        async: true,
        data: JSON.stringify(data),
        success: function (data) {
        data = this.searchBP();
        if (data == false) {

        }else{

        }
    },error{

    }});
    }
    • 0