使用 ajax 现场负载的可操作负载数据答案

【问题标题】：handsontable load data with ajax on site load使用 ajax 现场负载的可操作负载数据
【发布时间】：2017-03-12 06:12:52
【问题描述】：

谁能解释一下这段代码为什么有效：

$(document).ready(function () {


    var container = document.getElementById('example');


    function getData() {

        var result = null;
        $.ajax({
            url: 'someurl',
            type: 'get',
            dataType: 'json',
            async: false,
            success: function(res) {
                result = res.data;
            }
        });

        return result;

    }

    var hot = new Handsontable(container,{
        data:getData(),
        startRows: 8,
        startCols: 8,
        rowHeaders: true,
        colHeaders: true,

        stretchH: 'all',
        minSpareRows: 0,
        contextMenu: true

    });

});

如果我将 async 更改为 true，它就不起作用了。

控制台中带有此消息的工作代码：

主线程上的同步 XMLHttpRequest 已被弃用，因为它会对最终用户的体验产生不利影响。

还有一个重要的问题，我必须改变那个handsontable 将与 async:true 一起使用。

非常感谢。我搜索了谷歌，只找到了带有加载按钮的示例，而不是加载站点加载。

【问题讨论】：

标签： jquery ajax handsontable

【解决方案1】：

问题是当您使用async:true 时，handsontable 实例将在没有数据的情况下被实例化，因为 getData() 返回 null。

也许你可以这样做：

$(document).ready(function () {
    var container = document.getElementById('example');

    var hot = new Handsontable(container,{
        startRows: 8,
        startCols: 8,
        rowHeaders: true,
        colHeaders: true,
        stretchH: 'all',
        minSpareRows: 0,
        contextMenu: true
    });

    function loadData() {
        $.ajax({
            url: 'someurl',
            type: 'get',
            dataType: 'json',
            async: true,
            success: function(res) {
                hot.loadData(res.data);
            }
        });
    }

    loadData();
});

【讨论】：

【解决方案2】：

Joakim 提供的解决方案有效，但在加载 DOM 后也会在同一个 url 上触发 2 次 ajax 调用。（当 ajax 请求返回大量数据时，这可能很烦人）。 Javascript Promise 可以帮助解决这样的异步问题：

function handsonTableLoad(url) {

    return new Promise(function(resolve, reject) {
      var request = new XMLHttpRequest();
      request.open('GET', url);
      request.responseType = 'json';
      request.onload = function() {
        if (request.status === 200) {
          resolve(request.response);
        } else {
          reject(Error('Data didn\'t load successfully; error code:' + request.statusText));
        }
      };
      request.onerror = function() {
          reject(Error('There was a network error.'));
      };
      request.send();
    });
  }

  $(document).ready(function () {
      var container = document.getElementById('example');

      handsonTableLoad(someurl).then(function(response) {
        var hot = new Handsontable(container, {
                data: response,
                startRows: 8,
                startCols: 8,
                rowHeaders: true,
                colHeaders: true       
          });
      }, function(Error) {
        console.log(Error);
      });
    });

【讨论】：