Question

我有一个由AJAX填充的数据表。一切都很好，但我希望有一些快捷方式来从服务器请求数据。问题是如何更改我即时发送的数据？我知道我可以创建一个元素<input>或其他东西，它可以从中获取值，但我希望我可以在点击某些内容后更改数据。

var Table = $('#table').DataTable({
            "ajax": {
                "type" : "POST",
                "url": "url",
                "data": function ( d ) {
                    d.cmd = "offline";
                }
            },
        });

这很好用，并将cmd作为offline传递回服务器。如何在调用ajax.reload之前更改该值。

$('#online_btn').on( 'click', function () {
            Table.ajax.reload();
        } );

使用此

$('#online_btn').on( 'click', function () {
            var d = [];
            d.cmd = "online";
            Table.ajax.data(d);
            Table.ajax.reload();
        } );

回复ajax.data is not a function错误

Answer 1

您可以修改对象并使用$.extend()在数据函数中进行合并

var myData ={};
var Table = $('#table').DataTable({
            "ajax": {
                "type" : "POST",
                "url": "url",
                "data": function ( d ) {
                   return  $.extend(d, myData);
                }
            },
        });

$('#online_btn').on( 'click', function () {            
            myData.cmd = "online";            
            Table.ajax.reload();
});

Answer 2

使用jquery ajax beforesend object。

$.ajax({
 url: "http://fiddle.jshell.net/favicon.png",
 beforeSend: function( xhr ) {
   //update your value here
}
})

来源：jquery documentation

<强> beforeSend 类型：功能（jqXHR jqXHR，PlainObject设置）一个预请求回调函数，可用于在发送之前修改jqXHR（在jQuery 1.4.x，XMLHTTPRequest）对象中。使用它来设置自定义标题等.jqXHR和设置对象作为参数传递。这是一个Ajax事件。在beforeSend函数中返回false将取消请求。从jQuery 1.5开始，无论请求的类型如何，都将调用beforeSend选项。

Answer 3

我在 2021 年这样做：

function customSearch(){
        let t = JSON.parse(window.filter);
        t["custom-field"] =  $('input[name="custom-field"]').val() || "";
        window.filter = JSON.stringify(t);
        return window.filter;
}
const table = $('#table').DataTable({
        ajax:{
           url:"my-wonderful-url.json",
           type:"POST",
           data: function(d) {
            const t = customSearch();
            return  Object.assign(d, {filter:t});
        },
        error:function(e){console.log(e);},            
});
 $('input[name="custom-field"]').on('keyup', function(e){         
    table.ajax.reload(null, false);
});

数据表，更改AJAX数据（不包含元素）

3 个答案: