代码之家 › 专栏 › 技术社区 › dwelch

在函数内执行jquery ajax调用时出现问题

ajax jquery javascript

dwelch · 技术社区 · 15 年前

我想在函数中放置一个Ajax调用,因为我在多个位置重复使用它。我想要返回一个被操纵的响应版本。下面是我要做的(非常简单)。

a = getAjax();
$('body').append('<div>'+a+'</div>');
function getAjax() {
  $.ajax({
   type: "GET",
   url: 'someURL',
   success: function(response) {
     return response;
  });
}

但是,发生的情况是,在getajax函数中定义“a”之前,append函数正在运行。有什么想法吗?

5 回复 | 直到 7 年前

Niko 15 年前

有两种方法来标记这个。一种是使用成功回调:

$.ajax({
   type: "GET",
   url: 'someURL',
   success: function(response) {
     AppendResponse(response);
  });

另一种方法是将async设置为false http://api.jquery.com/jQuery.ajax/ :

var a;
getAjax();
$('body').append('<div>'+a+'</div>');
function getAjax() {
  $.ajax({
   type: "GET",
   url: 'someURL',
   async: false,
   success: function(response) {
     a = response;
  });
}

关于非异步的重要说明:

跨域请求和数据类型:“jsonp”请求不支持同步操作。

lonesomeday 15 年前

Ajax是异步的。这意味着成功处理程序中的代码将被延迟,直到请求成功为止,而其余的代码将继续正常工作。您需要将相关代码放入Ajax成功处理程序中:

getAjax();
function getAjax() {
  $.ajax({
   type: "GET",
   url: 'someURL',
   success: function(response) {
     $(document.body).append('<div>'+response+'</div>');
  });
}

请注意,我也优化了您的 body 使用本机javascript选择 document.body 而不是使用标准的标签选择器。

编辑回调版本

function getAjax(callback) {
    $.ajax({
        type: 'GET',
        url: 'someURL',
        success: callback
    });
}

现在可以使用回调函数内联代码:

getAjax(function(response) {
    $(document.body).append('<div>'+response+'</div>');
});

或

getAjax(function(response) {
    alert(response);
});

或者什么。

当Ajax请求完成时,将处理匿名函数调用中的代码。

dpmguise 15 年前

我的一个建议是将触发器传递给您想要运行到Ajax函数中的命令,以便它在Ajax收到响应后运行。-

a = getAjax();
function getAjax() {
  $.ajax({
   type: "GET",
   url: 'someURL',
   success: function(response) {
     inputText(response);
  });
}

inputText(someText) {
$(document.body).append('<div>'+ someText +'</div>');
}

这样,您就可以创建if语句/其他选项,以便继续对不同的结果使用相同的ajax命令。

amurra 15 年前

为什么不将响应返回到成功回调中的另一个函数。这将处理您对不同响应的需求:

getAjax();
function getAjax() {
  $.ajax({
   type: "GET",
   url: 'someURL',
   success: function(response) {
     AppendResponse(response);
  });
}

function AppendResponse(response) {
$('body').append('<div>'+response+'</div>');
}

Jack Moody A.J. Uppal 7 年前

您可以为函数提供一个处理程序 getAjax() ,但是如果用户需要下一个决策所需的信息,那么为什么不使用 async: false ?

function getAjax(handler) {
   $.ajax({
   type: "GET",
   url: 'someURL',
   success: function(response) {
     handler(response);
  });
};
function callGetAjax(response) {
  if(response === undefined) {
    getAjax(callGetAjax);
  } else {
    $('body').append('<div>'+response+'</div>');
  }
}