Ajax回调以将变量检查为全局变量

Question

I'm trying to implement a function that after consulting a service brings the variables as global.

  function ajax_test(str1, callback){  
   $.ajax({ 
     url: '/path/service',
     type: 'POST',
     dataType: "json",
     data: {'vars':$('form').serialize(), 'test':123},
     success: function(data, status, xhr){  
       callback(data);
     }
   });  
}

and I'm trying to call like this:

ajax_test("str", function(url) {
    //do something with url
    console.log(url);
});

Now, if I just call ajax_test() it returns an error, saying that callback is not a function .

How would be the best way to simply call the function and get the results to use global variables?

Edit: I think a good question is: what is a good alternative to async: false? How is the best way to implement synchronous callback?

Edit 2: For now, I'm using $.post() with $.ajaxSetup({async: false}); and it works how I expect. Still looking a way I could use with a callback.

Answer 1

Have to set the scope inside the success method. Adding the following should work.

function ajax_test(str1, callback){  
   $.ajax({ 
       url: '/path/service',
       type: 'POST',
       dataType: "json",
       data: {'vars':$('form').serialize(), 'test':123},
       success: function(data, status, xhr){  
           this.callback(data);
       }.bind(this)
   });  
}

Answer 2

As an argument of the ajax_test function, callback is in the scope of the ajax_test function definition and can be called anywhere there, particularly in the success case. Note that calling ajax_test() without arguments will as expected make your code call a function that does not exist, named callback .

The following sends an Ajax request to the jsFiddle echo service (both examples of callback as anonymous or global function are given in the jsFiddle), and works properly :

function ajax_test(str1, callback){  
   $.ajax({ 
     url: '/echo/json',
     type: 'POST',
     dataType: "json",
     data: {
        json: JSON.stringify({
        'vars':$('form').serialize(),
        'test':123
       })
     },
     success: function(data, status, xhr){  
       callback(data);
     }
   });  
}

ajax_test("unusedString", function(data){
    console.log("Callback (echo from jsFiddle called), data :", data);
});

Can you check that the webservice you're calling returns successfully ? Here is the jsFiddle, I hope you can adapt it to your need :

https://jsfiddle.net/dyjjv3o0

UPDATE: similar code using an object

function ajax_test(str1) {

  this.JSONFromAjax = null;

  var self = this;

  function callback(data) {
     console.log("Hello, data :", data);
     console.log("Hello, this :", this);
     $("#callbackResultId").append("<p>Anonymous function : " + JSON.stringify(data) + "</p>");
     this.JSONFromAjax = JSON.stringify(data);
  }

  $.ajax({
    url: '/echo/json',
    type: 'POST',
    dataType: "json",
    data: {
      json: JSON.stringify({
        'vars': $('form').serialize(),
        'test': 123
      })
    },
    success: function(data, status, xhr) {
      console.log("Success ajax");
      // 'self' is the object, force callback to use 'self' as 'this' internally.
      // We cannot use 'this' directly here as it refers to the 'ajax' object provided by jQuery
      callback.call(self, data);
    }
  });
}

var obj = new ajax_test("unusedString");
// Right after the creation, Ajax request did not complete
console.log("obj.JSONFromAjax", obj.JSONFromAjax);
setTimeout(function(){
  // Ajax request completed, obj has been updated
  console.log("obj.JSONFromAjax", obj.JSONFromAjax);
}, 2000)

You cannot expect the Ajax request to complete immediately (don't know how it behaves with async: false though, this is why you need to wait for a while before getting the actual response.

Updated jsFiddle here : http://jsfiddle.net/jjt39mg3

Hope this helps!