将 ajax json 对象放入 javascript 变量中

Placing an ajax json object into a javascript variable

本文关键字：javascript 变量 ajax json 对象      更新时间：2023-09-26

自从我之前的问题以来，我一直在试图弄清楚这个问题。

我可以接收数据，因为我在 safari 上使用Develop > Show Web Inspector的资源下看到它。但我似乎无法成功地将其分配给变量以供以后使用。

<script>
function getData () {
  $.ajax
    ({
      type: "GET",
      url: "https://myjirasite.com/jira/rest/api/2/project/ON/versions?",
      dataType: 'jsonp',
      //async: true,
         beforeSend: function (xhr) {xhr.setRequestHeader('Authorization', make_base_auth("myusername", "mypassword"));},
      success: function (){
      //Attempt 1 at outputting the result to an alert. 
      alert(JSON.parse(data));            
      }
    });
  }

function make_base_auth(user, password) {
  var tok = user + ':' + password;
  var hash = btoa(tok);
  return 'Basic ' + hash;
}
</script>

在第二次尝试中，我将 ajax 调用分配给变量，并尝试将其打印到警报中。没有成功。警报为空

  var jqXHR = $.ajax
    ({
      type: "GET",
      url: "https://myjirasite/jira/rest/api/2/project/ON/versions?",
      dataType: 'jsonp',
      async: false,
         beforeSend: function (xhr) {xhr.setRequestHeader('Authorization', make_base_auth("myusername", "mypassword"));},
      success: function (data){
        alert(JSON.parse(data));            
      }
    });
    alert(JSON.parse(jqXHR.responseText));

我知道问题在于 ajax 调用是异步的，但我无法弄清楚如何编写回调，以便我可以将 json 数据放入变量中，以便稍后通过不同的函数使用。

不要设置async: false，因为这会在处理您的 Ajax 请求时阻止浏览器。

相反，您可以使用 promise，或者从成功回调中调用另一个函数。

像这样：

function getData(){
  return $.ajax({
    type: "GET",
    url: "https://myjirasite/jira/rest/api/2/project/ON/versions?",
    dataType: 'jsonp',
    beforeSend: function(xhr){
      xhr.setRequestHeader('Authorization', make_base_auth("myusername", "mypassword"));
    }
  });
}
getData()
.done(function (data){
  console.log(JSON.parse(data));            
})
.fail(function(){
  console.log("Error!");
});

<script>
var getData = function() {
  $.ajax
    ({
      type: "GET",
      url: "https://myjirasite.com/jira/rest/api/2/project/ON/versions?",
      dataType: 'jsonp',
      //async: true,
         beforeSend: function (xhr) {xhr.setRequestHeader('Authorization', make_base_auth("myusername", "mypassword"));},
      success: function (){
      //Attempt 1 at outputting the result to an alert. 
      alert(JSON.parse(data));            
      getData.data= JSON.parse(data);
      }
    });
  }

function make_base_auth(user, password) {
  var tok = user + ':' + password;
  var hash = btoa(tok);
  return 'Basic ' + hash;
}
setTimeout(function(){console.log(getData.data);}, 3000); // Fire after 3 seconds to get data.
</script>

我认为$.ajax实际上并没有返回任何东西 - 但我可能是错的。无论哪种方式，这都不太重要，因为您不应该依赖立即可用的 ajax 调用的结果。您的alert语句在 Ajax 请求完成之前触发 - 听起来您已经知道了。

在利用异步调用 (ajax( 时，最佳做法是让任何依赖于从调用返回的数据的逻辑在回调中完成(或由回调触发((或如 Zelig 提到的@Jack承诺(。这就是$.ajax success参数的全部内容。请求成功完成后，将调用它。您还可以定义complete和error回调 - 分别在请求完成(无论状态如何(和请求失败后触发。

总而言之，您最好的选择可能是：

var jqXHR = $.ajax
({
  type: "GET",
  url: "https://myjirasite/jira/rest/api/2/project/ON/versions?",
  dataType: 'jsonp',
  success: successHandler
});
function successHandler(data) {
    alert(JSON.parse(data));
}

这样，只有在收到数据后，才会显示包含数据的警报。

相关文章：