javascript - 使用 JSON 调用 API

Question

这个问题已经有答案了:

Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference (7 个回答)

已关闭 6 年前。

我正在尝试学习如何使用 JQuery 调用 API。我创建了一个小函数来更改 div ( class="quote-box" ) 内的文本。该功能在大多数情况下似乎运行良好。单击#newQuote按钮将 div 中的文本更改为 Didn't work .

但是，.getJSON中间什么都不做。我希望这段代码将文本更改为“Yay.”，但它拒绝在 function(json){ } 内执行任何操作。 block 。

--旧代码已删除--

任何帮助将不胜感激。

编辑:这似乎与上述问题并不重复，因为即使删除所有变量后，该函数仍然会失败。

  $("#newQuote").on("click", function(){

       $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=json", function(json){
         $(".quote-box").html("Yay");
       }); 
 });

编辑2:解决了。 forismic API 不喜欢 https。切换到普通 http 使一切正常工作。

Answer 1

因为 getJSON 是异步调用，这意味着之后的代码不会等待 getJSON 完成才能继续。

因此，要解决此问题，请在 getJSON 内添加 $(".quote-box").html(outputString);

 $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=json", function(jsonp){
    outputString = "Yay."; 
    // Select the quote box, change the html. No problem here.
    $(".quote-box").html(outputString);
 });