jQuery数据表Ajax调用在第一次运行后被破坏

提问者：小点点

jQuery数据表Ajax调用在第一次运行后被破坏

我有一个数据表：

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

对此：

http://localhost:55601/Reservations/[对象对象]？_=1522265383242

我已经广泛地研究了[object object]，它似乎表明ajax请求的格式不正确。在某些情况下，url的格式不正确，在其他情况下，指定http方法可以修复此问题。然而，在我的情况下，这两个似乎都不是问题，奇怪的是，它在第一次运行时工作，所以我认为这不是问题。

我添加了一些日志记录，以显示正在发生的情况：

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

我做错什么了吗？或者jquery或datatables插件的工作方式是否有我不了解的怪癖？

共1个答案

匿名用户

我已经设法弄明白问题出在哪里了。通常，初始化表时，需要指定一个ajax对象：

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

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

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

我以前尝试过使用destroy（）函数，但没有效果。所以，我的解决方法就是简单地使用迭代计数器。在第一次运行时，我将对象传递给它，在后续运行时，我将URL传递给它。

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