如何使用 jquery 访问全局对象中的 ajax 响应数据？ [复制]

Question

我已经厌倦了这段代码，但我可以访问资产变量中的 ajax 响应数据，我该如何访问它。

const JSONURL = 'json';
var assets = {};

$(function() {
  $.ajax({
    url: `${JSONURL}/assets.json`,
    type: "GET",
    success: function(data) {
      assets.data
    }
  })
});

console.log(assets);

Answer 1

如果您的 api 响应是 JSON，那么您只需编辑

success: function(data) {
      assets.data = data
    }

您还可以将assets 对象与窗口对象绑定，以使assets 成为全局范围

Answer 2

您可以使用Custom Event。在这种情况下，您希望在 ajax 成功时触发自定义事件。把它想象成一个事件，你定义。在这种情况下，让我们在窗口对象上触发一个名为my-first-fancy-custom-event 的自定义事件。然后另一方面，您添加事件侦听器（与任何其他事件一样），但在这种情况下，您侦听您定义的名称，再次是 my-first-fancy-custom-event。

window.addEventListener(
  "my-first-fancy-custom-event", 
  function(event) {
    // you will only need assets or event.detail
    // this is just to show both ways to get the data
    // chose one also in the ajax success method
    // my personal choice is to avoid global variables like assets
    console.log('assets: ', assets);
    console.log('event.detail: ', event.detail);
  }
);



const JSONURL = 'json';
var assets = {};

$(function() {
  $.ajax({
    url: `${JSONURL}/assets.json`,
    type: "GET",
    success: function(data) {
      // fire custom event here passing the data in detail object
      // see https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
      // for more details
      assets = data; // so either set the data to the global assets variable
      window.dispatchEvent(
        new CustomEvent(
          "my-first-fancy-custom-event",
          { detail: { myData: data } } // just add here and empty object => {}
                                       // if you chose global variable
        );
      );
    }
  })
});