jQuery Datatables Ajax 调用在第一次运行后被破坏答案

【问题标题】：jQuery Datatables Ajax Call get's broken after first runjQuery Datatables Ajax 调用在第一次运行后被破坏
【发布时间】：2018-03-29 04:40:07
【问题描述】：

我有一个数据表：

var dt = $("#reservations").DataTable(
                {
                    columns: [
                        {
                            data: "ReservationStart",
                            render: function (data) {
                                return $.format.date(data, "d MMM, yyyy h:mm a");
                            }

                        },
                        {
                            data: "Covers"
                        },
                        {
                            data: "id",
                            render: function (data) {
                                return "<button class='btn btn-primary js-edit' data-reservation-id=" + data + ">Edit</button> &nbsp; <button class='btn btn-secondary js-delete' data-reservation-id=" + data + ">Delete</button>";
                            }
                        }
                    ]
                }
            );

数据表用于显示客户的预订列表。首先客户输入他们的电子邮件地址，然后我进行 ajax 调用以检索他们的客户 ID，然后再进行第二次 ajax 调用以使用与其客户 ID 关联的所有预订填充表：

var baseURL = "/api/Reservations?CustomerId=";

$("#btnSearch").on("click",
            function () {
                var custEmail = $("#txtEmail").val();
                var customer = $.ajax(
                    {
                        url: "/api/Customers?email=" + custEmail,
                        data: "",
                        success: function (customer) {
                            var ajaxurl = baseURL + customer.id;
                            var ajaxobj = {
                                url: ajaxurl,
                                dataSrc: ""
                            };
                            dt.ajax.url(ajaxobj).load();
                            dt.clear().draw();
                        },
                        error: function () {
                            bootbox.alert("Doesn't look like you've made any bookings.");
                        }
                    });
            });

页面加载后，效果很好。但是，如果您尝试执行第二次搜索，则预订 API 的 ajax 调用的 URL 将从以下位置更改：

http://localhost:55601/api/Reservations?CustomerId=1&_=1522265383241

到这里：

http://localhost:55601/Reservations/[object%20Object]?_=1522265383242

我对@987654327@ 进行了广泛研究，这似乎表明ajax 请求格式错误。在某些情况下，url 格式错误，在其他情况下，指定 http 方法可以修复它。然而，就我而言，这些似乎都不是问题，而且奇怪的是它在第一次运行时就可以工作，所以我认为不是这样。

我添加了一些日志来显示正在发生的事情：

如您所见，客户 API 调用每次都运行良好。每次都正确设置发送到预订 API 的 ajax 调用的 URL。在第一次运行时我唯一能看到的不同之处是“数据”未定义。

我在这里做错了吗？还是 jquery 或 datatables 插件的工作方式有我不理解的怪癖？

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

我已经设法找出问题所在。通常，当你初始化你的表时，你会指定一个 ajax 对象：

$("#mytable").DataTables({
    ajax:
    {
        url: [api url],
        dataSrc: [data source or blank]
    },
    columns:
    [
        etc...
    ]
});

在我的例子中，因为在用户执行搜索之前我没有数据，所以我没有指定这个（使用没有指定 url 的 ajax 对象初始化表会导致未定义的错误）。因此，当我第一次为数据表（而不是客户搜索）运行 ajax 调用时，我必须向它传递一个对象。将 URL 传递给它只会导致未定义的错误。

但是，在随后的运行中，由于此时已经定义了 ajax 对象，将对象作为 URL 参数传递具有预期的效果 - URL 是一个对象，因此我们看到的是 [object%20Object]。

我之前尝试过使用 destroy() 函数没有效果。所以，我的解决方法就是使用迭代计数器。在第一次运行时，我将对象传递给它，在随后的运行中，我将 URL 传递给它。

我不确定是否有更好的方法。

【讨论】：