将 Ajax JQuery 选择器保存在数组中答案

【问题标题】：Save Ajax JQuery selector in an array将 Ajax JQuery 选择器保存在数组中
【发布时间】：2019-07-05 13:32:54
【问题描述】：

我是 Ajax 的新手，我需要帮助将 Ajax 请求中的数据存储到数组中。我在论坛上查看了答案，但我无法解决我的问题。Ajax 响应将进入$('#responseField').val(format(output.response))，我希望将“output.response”存储到可以在外部使用的数组中阿贾克斯。我试图在 Ajax 之外声明一个变量并稍后调用它，但没有成功。我正在使用应该获取数据的$json_arr。如何从 Ajax 获取数据并将其存储在要在 Ajax 外部使用的变量中？这个变量将是一个我可以访问索引的数组。

function sendRequest(postData, hasFile) {

  function format(resp) {
    try {
      var json = JSON.parse(resp);
      return JSON.stringify(json, null, '\t');
    } catch(e) {
      return resp;
    }
  }

  var value; // grade item
  $.ajax({
          type: 'post',
          url: "doRequest.php",
          data: postData,
          success: function(data) { //data= retArr

            var output = {};

            if(data == '') {
              output.response = 'Success!';
            } else {
              try {
                output = jQuery.parseJSON(data);


              } catch(e) {
                output = "Unexpected non-JSON response from the server: " + data;
              }
            }
            $('#statusField').val(output.statusCode);
            $('#responseField').val(format(output.response));

            $("#responseField").removeClass('hidden');
            data = $.parseJSON(output.response)
            $json_arr=$('#responseField').val(format(output.response));
          },
          error: function(jqXHR, textStatus, errorThrown) {
            $('#errorField1').removeClass('hidden');
            $("#errorField2").innerHTML = jqXHR.responseText;
          }

  });

}

window.alert($json_arr);

【问题讨论】：

Wait until all jQuery Ajax requests are done?的可能重复
@Nick 为什么你将它标记为重复而不是重复？用户询问如何将数据从 ajax 返回到 javascript 内的全局范围，而不是如何等待多个 ajax 调用。
@Admir OPs 的问题是 window.alert($json_arr); 在 ajax 调用完成之前执行，因此 $json_arr 中没有数据。
How do I return the response from an asynchronous call?的可能重复
@Nick 我该如何解决？

标签： php jquery arrays json ajax

【解决方案1】：

let promise = new Promise(function(resolve, reject) {
  $.ajax({
          type: 'post',
          url: "doRequest.php",
          data: postData,
          success: function(data) { //data= retArr

            var output = {};

            if(data == '') {
              output.response = 'Success!';
            } else {
              try {
                output = jQuery.parseJSON(data);


              } catch(e) {
                output = "Unexpected non-JSON response from the server: " + data;
              }
            }
            $('#statusField').val(output.statusCode);
            $('#responseField').val(format(output.response));

            $("#responseField").removeClass('hidden');
            data = $.parseJSON(output.response)
            resolve(format(output.response));
          },
          error: function(jqXHR, textStatus, errorThrown) {
            $('#errorField1').removeClass('hidden');
            $("#errorField2").innerHTML = jqXHR.responseText;
          }

  });
});
promise.then(
  function(result) { /* you can alert a successful result here */ },
  function(error) { /* handle an error */ }
);

问题是您正在异步调用。

【讨论】：

【解决方案2】：

您同步调用警报，但应该异步调用它。

一个小sn-p可以帮助你看出区别：

// $json_arr initialized with a string, to make it easier to see the difference
var $json_arr = 'Hello World!';

function sendRequest() {

  $.ajax({
    // dummy REST API endpoint
    url: "https://reqres.in/api/users",
    type: "POST",
    data: {
        name: "Alert from AJAX success",
        movies: ["I Love You Man", "Role Models"]
    },
    success: function(response){
        console.log(response);
        $json_arr = response.name;
        // this window.alert will appear second
        window.alert($json_arr);
    }
  });

}
sendRequest();
// this window.alert will appear first
window.alert($json_arr);

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：