Ajax json请求和响应

时间:2017-05-20 04:39:56

标签: javascript ajax api

我希望我能在一个相当基础的层面上帮助理解这段代码中发生的事情。

我知道这基本上是调用指定的URL。我也知道它应该返回一个JSON对象。如果调用成功,则调用我在下面定义的if (value >= 90) { progressBar.progressTintColor = UIColor.redColor() } else { progressBar.progressTintColor = UIColor.greenColor() } progressBar.setProgress(Float(value)/100, animated : true) 函数。

displayResults函数只需一个参数。

如果我传递一个简单的字符串(例如代码中的“响应”),一切正常。但是,我想将API调用中的响应对象作为参数传递给函数,但我无法弄清楚如何。响应对象是否具有我应该使用的特定名称?

displayResults

3 个答案:

答案 0 :(得分:2)

你必须明白,在Javascript中,函数是“一等”的,这意味着一个函数可以像处理任何其他变量一样被处理:你可以将它作为变量传递给另一个函数,并从中返回另一个功能。

这在javascript中大量使用,尤其是作为回调。

当您调用$.ajax函数时,您将其作为参数提供。该对象将包含ajax请求的不同状态的回调函数 - 其中一个是success

因此,基本上,键success需要具有类型函数的值。

现在,当您说displayResults("response")时,您正在使用参数displayResults调用函数"response" - 其返回类型不是function

如果您只是说displayResults而不是(),那么您正在对待该函数,就像处理任何其他变量一样。该功能未执行。

您可以执行以下操作:

var functionAlias = displayResults;

就像任何其他变量一样。

以同样的方式,您可以这样做:

$.ajax({
    url: wikiAPI,
    dataType: "json",
    success: displayResults
});

现在,当ajax请求成功时,jquery将调用你提供的函数。

您可以阅读documentation,了解函数中期望的参数:

  

成功

     

类型:功能(任何数据,字符串textStatus,jqXHR jqXHR   )

     

请求成功时要调用的函数。功能得到   传递了三个参数:从服务器返回的数据,格式化   根据dataType参数或dataFilter回调   功能,如果指定;描述状态的字符串;和jqXHR   (在jQuery 1.4.x,XMLHttpRequest中)对象。

因此,您的displayResults函数将收到三个参数:data(可以是任何类型),textStatus(字符串)和jqXHR(XMLHttpRequest对象)。虽然参数名称可以是您想要的任何名称,但通常的做法是使其与文档保持一致。

答案 1 :(得分:1)

关于成功方法参数,它没有特定的名称,它是动态的,请看一下这个链接JavaScript Object Methods

关于你的代码,如下所示进行ajax调用

$.ajax({
url: wikiAPI,
dataType: "json",
success: function(data){
displayResults(data)
},
error:function(erData):function{cosole.log(erData)}
});

似乎displayResults方法未完成,因为它接收一个对象作为输入,你应该在你的方法中迭代你的对象,如下所示

function displayResults(data){
console.log("Ajax success response data:", data);
$.each( data, function( key, value ) {
$(".results").append(data.YourProperty);
}) 
};

请注意我使用error方法确保ajax调用成功,否则将触发error方法

希望它能够解决问题

答案 2 :(得分:0)

试试这个

$.ajax({
      url : wikiAPI,
      dataType : "json",
      success: function(response){
            displayResults(response)
         }
      });
})

function displayResults(data){
  console.log("Ajax success response data:", data); 
  $(".results").html("<p><h3>Hello World!</h3></p>");
}