如何在代码中获取 ajax 数据数组结果？

Question

我有一些代码需要从 Ajax 调用中插入一个数组，但我无法弄清楚如何执行此操作。

这是我正在尝试使用的代码：

let result = getResult();
let statusList = getStatusList();

console.log(result);

$('#resdatatable').dataTable({
  data: result,
  destroy: true,
  columns: [
    { data: 'id', title: 'ID' },
    { data: 'bookingdatetime', title: 'Booking Date' },
    { data: 'name', title: 'Name' },
    { data: 'class', title: 'Class' },
    { data: 'pickupdatetime', title: 'Pick up' },
    { data: 'duration', title: 'Duration' },
    { data: 'dropdatetime', title: 'Drop off' },
    { data: 'age', title: 'Age' },
    { data: 'coverage', title: 'Coverage' },
    { data: 'quote', title: 'Quote' },
    {
      data: 'status',
      title: 'Status',
      render: function(data, type, row) {
        let isKnown = statusList.filter(function(k) { return k.id === data; }).length > 0;
        if (isKnown) {
          return $('<select onchange="doit(' + row.id + ')">', {
            id: 'resstatus-' + row.id, // custom id
            value: data
          }).append(statusList.map(function(knownStatus) {
            let $option = $('<option>', {
              text: knownStatus.text,
              value: knownStatus.id
            });
            if (row.status === knownStatus.id) {
              $option.attr('selected', 'selected')
            }
            return $option;
          })).on('change', function() {
            changeresstatus(row.id); // Call change with row ID
          }).prop('outerHTML');
        } else {
          return data;
        }
      }
    }
  ]
});

function getResult() {
  return [{
    'id': 1,
    'bookingdatetime': '2019-11-01',
    'name': 'John Doe',
    'class': '',
    'pickupdatetime': '',
    'duration': '',
    'dropdatetime': '',
    'age': 18,
    'coverage': '',
    'quote': '',
    'status': 'Confirmed'
  }, {
    'id': 2,
    'bookingdatetime': '2019-11-01',
    'name': 'Jane Doe',
    'class': '',
    'pickupdatetime': '',
    'duration': '',
    'dropdatetime': '',
    'age': 21,
    'coverage': '',
    'quote': '',
    'status': 'Open'
  }, {
    'id': 3,
    'bookingdatetime': '2019-11-08',
    'name': 'Mary Sue',
    'class': '',
    'pickupdatetime': '',
    'duration': '',
    'dropdatetime': '',
    'age': 16,
    'coverage': '',
    'quote': '',
    'status': 'Closed'
  }, {
    'id': 4,
    'bookingdatetime': '2019-12-15',
    'name': 'Charlie Brown',
    'class': '',
    'pickupdatetime': '',
    'duration': '',
    'dropdatetime': '',
    'age': 25,
    'coverage': '',
    'quote': '',
    'status': 'Unknown'
  }];
}


/**
 * jQuery plugin to convert text in a cell to a dropdown
 */
(function($) {
  $.fn.createDropDown = function(items) {
    let oldTxt = this.text();
    let isKnown = items.filter(function(k) { return k.id === oldTxt; }).length > 0;
    if (isKnown) {
      this.empty().append($('<select>').append(items.map(function(item) {
        let $option = $('<option>', {
          text: item.text,
          value: item.id
        });
        if (item.id === oldTxt) {
          $option.attr('selected', 'selected')
        }
        return $option;
      })));
    }
    return this;
  };
})(jQuery);

// If you remove the renderer above and change this to true,
// you can call this, but it will run once...
if (false) {
  $('#resdatatable > tbody tr').each(function(i, tr) {
    $(tr).find('td').last().createDropDown(statusList);
  });
}



function getResult2() {
            $.ajax({
                type : 'get',
                url  : 'reservations2.php?city=la',
                dataType: 'json',
                cache: false,
                success :  function(data)
                {
                        response(data);

                }
            });
        }

function doit(id) {
alert ("hi!" + id);
}

function getStatusList() {
  return [{
    id: 'Confirmed',
    text: 'Confirmed'
  }, {
    id: 'Unconfirmed',
    text: 'Unconfirmed'
  }, {
    id: 'Open',
    text: 'Open'
  }, {
    id: 'Closed',
    text: 'Closed'
  }, {
    id: 'Canceled',
    text: 'Canceled'
  }];
}

当我将结果设置为 getResult();它工作得很好，但是当我将结果设置为 getResult2 它没有。我需要从 Ajax 调用中获取数组作为结果，我继续阅读有关如何返回 Ajax 调用的信息，但我没有为这个应用程序获取它。我该怎么做？

明确一点：我需要将getResult 替换为getResult2

快把我逼疯了！

Answer 1

使用回调获取结果

function getResult2(callback) { // ADDED CALLBACK
    $.ajax({
        type: 'get',
        url: 'reservations2.php?city=la',
        dataType: 'json',
        cache: false,
        success: callback  // USED CALLBACK
    });
}

getResult2(function (result) { // APPLIED CALLBACK
  $('#resdatatable').dataTable({
     data: result,             // YOUR RESULT
      destroy: true,
      columns: [
        { data: 'id', title: 'ID' },
        { data: 'bookingdatetime', title: 'Booking Date' },
        { data: 'name', title: 'Name' },
        { data: 'class', title: 'Class' },
        { data: 'pickupdatetime', title: 'Pick up' },
        { data: 'duration', title: 'Duration' },
        { data: 'dropdatetime', title: 'Drop off' },
        { data: 'age', title: 'Age' },
        { data: 'coverage', title: 'Coverage' },
        { data: 'quote', title: 'Quote' },
        {
          data: 'status',
          title: 'Status',
          render: function(data, type, row) {
            let isKnown = statusList.filter(function(k) { return k.id === data; }).length > 0;
            if (isKnown) {
              return $('<select onchange="doit(' + row.id + ')">', {
                id: 'resstatus-' + row.id, // custom id
                value: data
              }).append(statusList.map(function(knownStatus) {
                let $option = $('<option>', {
                  text: knownStatus.text,
                  value: knownStatus.id
                });
                if (row.status === knownStatus.id) {
                  $option.attr('selected', 'selected')
                }
                return $option;
              })).on('change', function() {
                changeresstatus(row.id); // Call change with row ID
              }).prop('outerHTML');
            } else {
              return data;
            }
          }
        }
      ]
    });
}) 

$('#resdatatable').dataTable 不是在 getResult2 里面