将ajax json对象放入javascript变量

Question

自从我之前提出问题以来， 我一直在试图解决这个问题 。

我可以使用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数据放入变量中，以供以后通过其他函数使用。

Answer 1

不要设置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!");
});

Answer 2

<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>

Answer 3

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

当利用异步调用（ajax）时，最佳实践是使任何逻辑都依赖于从调用返回的数据以在回调中完成（或由回调触发）（或@Jack Zelig提到的Promise）。 这就是$.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));
}

这样，仅一旦接收到数据，便会显示包含该数据的警报。