服务器端数据表以 json 格式发送 POST 数据

Posted 2023-05-09

【中文标题】服务器端数据表以 json 格式发送 POST 数据

【英文标题】：server side data tables send POST data as json

【发布时间】：2015-09-12 03:08:33

【问题描述】：

我正在尝试对数据表使用服务器处理：

$("#my-table-id").DataTable( 
    serverSide: true,
    ajax: 
    url: '/request/path/',
    type: 'POST',    
    
);

以 url 编码的形式发送数据，如您所见，这非常难以管理：

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&columns%5B5%5D%5Bdata%5D=5&columns%5B5%5D%5Bname%5D=&columns%5B5%5D%5Bsearchable%5D=true&columns%5B5%5D% 5Borderable%5D=true&columns%5B5%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B5%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B6%5D%5Bdata%5D=6&columns%5B6%5D%5Bname% 5D=&columns%5B6%5D%5Bsearchable%5D=true&columns%5B6%5D%5Borderable%5D=true&columns%5B6%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B6%5D%5Bsearch%5D%5Bregex%5D= false&columns%5B7%5D%5Bdata%5D=7&columns%5B7%5D%5Bname%5D=&columns%5B7%5D%5Bsearchable%5D=true&columns%5B7%5D%5Borderable%5D=true&columns%5B7%5D%5Bsearch%5D% 5Bvalue%5D=&columns%5B7%5D%5Bsearch%5D%5Bregex%5D=false&order%5B0%5D%5Bcolumn%5D=0&order%5B0%5D%5Bdir%5D=asc&start=0&length=100&search%5Bvalue%5D=&search% 5Bregex%5D=false

解码：

draw=1&columns[0][data]=0&columns[0][name]=&columns[0][searchable]=true&columns[0][orderable]=true&columns[0][search][value]=&columns[ 0][search][regex]=false&columns[1][data]=1&columns[1][name]=&columns[1][searchable]=true&columns[1][orderable]=true&columns[1][search][value ]=&columns[1][search][regex]=false&columns[2][data]=2&columns[2][name]=&columns[2][searchable]=true&columns[2][orderable]=true&columns[2][ search][value]=&columns[2][search][regex]=false&columns[3][data]=3&columns[3][name]=&columns[3][searchable]=true&columns[3][orderable]=true&columns [3][search][value]=&columns[3][search][regex]=false&columns[4][data]=4&columns[4][name]=&columns[4][可搜索]=true&columns[4][ orderable]=true&columns[4][search][value]=&columns[4][search][regex]=false&columns[5][data]=5&columns[5][name]=&columns[5][searchable]=true&columns [5][orderable]=true&columns[5][search][value]=&columns[5][search][regex]=false&columns[6][data]=6&columns[6][name]=&columns[6][可搜索]=true&columns[6][orderable e]=true&columns[6][search][value]=&columns[6][search][regex]=false&columns[7][data]=7&columns[7][name]=&columns[7][searchable]=true&columns [7][orderable]=true&columns[7][search][value]=&columns[7][search][regex]=false&order[0][column]=0&order[0][dir]=asc&start=0&length=100&search [值]=&搜索[正则表达式]=fals

我希望能够将其作为 JSON 发送，这似乎是在后端接收此数据的一种更简洁的方式。 我不知道它是如何在前端发送数据的，所以我不能使用这个问题应该是重复的解决方案

【问题讨论】：

您可以将其更改为 json %5B = [ 和 %5D = ]。请参阅***.com/questions/9966053/… 寻求帮助

jQuery ajax, how to send JSON instead of QueryString的可能重复

这是 jQuery 和 php 编码结构化数据的标准方法。如果您在后端使用 PHP，那么 $_POST['columns'] 将只包含有用的多维数组。如果您不使用 PHP，那么处理它仍然是微不足道的。它并非遥不可及。

我正在使用 Django，我应该对它进行 url 解码然后拆分它吗？我想获得可迭代的东西，而不必将每个参数一个一个地分配给一个变量。有没有办法从客户端发送 json，而不必在服务器端处理它？

***.com/questions/1890013/…

【参考方案1】：

要将数据作为 JSON 字符串提交，请使用以下代码：

$("#my-table-id").DataTable( 
    serverSide: true,
    ajax: 
       url: '/request/path/',
       type: 'POST',
       data: function (d) 
         return JSON.stringify(d);
       
    
);

更多信息请参见ajax.data。