Question

我正在尝试实现一个函数，在咨询服务之后将变量变为全局变量。

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

我想这样打电话：

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

现在，如果我只是致电ajax_test()，则会返回错误，说回调不是函数。

如何简单地调用函数并获得结果以使用全局变量？

修改我认为一个很好的问题是：什么是async的一个很好的替代品：false？实现同步回调的最佳方法是什么？

编辑2： 现在，我正在使用$.post()和$.ajaxSetup({async: false});，它的效果与我的预期相符。仍在寻找一种可以用回调的方式。

Answer 1

必须在成功方法中设置范围。添加以下内容应该有效。

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

作为ajax_test函数的参数，callback在ajax_test函数定义的范围内，可以在那里调用，特别是在success情况下。请注意，调用不带参数的ajax_test()将按预期使您的代码调用一个不存在的函数，名为callback。

以下内容向jsFiddle echo服务发送Ajax请求（jsFiddle中给出了callback的匿名或全局函数示例），并且正常工作：

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

您可以检查您正在呼叫的网络服务是否成功返回？这是jsFiddle，我希望你能根据自己的需要进行调整：

https://jsfiddle.net/dyjjv3o0

UPDATE：使用对象的类似代码

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)

您不能指望Ajax请求立即完成（不知道它与async: false的行为有关，这就是为什么您需要等待一段时间才能获得实际响应。

在此处更新了jsFiddle：http://jsfiddle.net/jjt39mg3

希望这有帮助！

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

2 个答案: