jQuery的数据表AJAX追加不必要的查询参数

问题描述

我正在通过服务器端分页实现jquery DataTable。请参考下面的代码段-

脚本

$(async function() {
    $('#registry_table').DataTable({
        serverSide: true,ajax: {
            url: 'localhost:3000/provenance/registries',headers: {
                'Content-Type': 'application/json','Authorization': 'Bearer ' + localStorage.getItem("token")
            },params: {
                page: 0,per_page: 5
            }
        },language: {
            searchPlaceholder: "Search...",search: "",lengthMenu: "_MENU_  items/page"
        }
    });
});

HTML

<table class="table table-striped mg-b-0" id="registry_table">
    <thead>
        <tr>
            <th class="text-left">#</th>
            <th class="text-left">Name</th>
            <th class="text-left">Created on</th>
            <th class="text-left">Transaction</th>
            <th class="text-center">Action</th>
        </tr>
    </thead>
</table>

但是当调用REST API时，它会生成错误的URL

http://localhost:3000/provenance/registries?draw=1&columns%5B0%5D%5Bdata%5D=0&columns%5B0%5D%5Bname%5D=&columns%5B0%5D%5Bsearchable%5D=true&columns%5B0%5D%5Borderable%5D=true&columns%5B0%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B0%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B1%5D%5Bdata%5D=1&columns%5B1%5D%5Bname%5D=&columns%5B1%5D%5Bsearchable%5D=true&columns%5B1%5D%5Borderable%5D=true&columns%5B1%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B1%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B2%5D%5Bdata%5D=2&columns%5B2%5D%5Bname%5D=&columns%5B2%5D%5Bsearchable%5D=true&columns%5B2%5D%5Borderable%5D=true&columns%5B2%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B2%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B3%5D%5Bdata%5D=3&columns%5B3%5D%5Bname%5D=&columns%5B3%5D%5Bsearchable%5D=true&columns%5B3%5D%5Borderable%5D=true&columns%5B3%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B3%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B4%5D%5Bdata%5D=4&columns%5B4%5D%5Bname%5D=&columns%5B4%5D%5Bsearchable%5D=true&columns%5B4%5D%5Borderable%5D=true&columns%5B4%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B4%5D%5Bsearch%5D%5Bregex%5D=false&order%5B0%5D%5Bcolumn%5D=0&order%5B0%5D%5Bdir%5D=asc&start=0&length=10&search%5Bvalue%5D=&search%5Bregex%5D=false&_=1600077609184

如您所见，它没有传递页面和per_page查询参数。并且不确定如何将所有其他参数添加到URL。

解决方法

将params的键更改为data，并返回了要通过URL作为JSON发送的参数。

更新的脚本：

ajax: {
    url: `${self.$provenance.defaults.baseURL}/provenance/registries`,headers: {
        'Content-Type': 'application/json','Authorization': 'BWS ' + localStorage.getItem("token")
    },data: () => {
        return {page: 0,per_page: 5};
    },dataSrc: 'registries'
}

它删除了所有不需要的标题_

http://localhost:3000/provenance/registries?page=0&per_page=5&_=1600082235692