Datatable AJAX请求：如何将Null原型对象转为普通对象并解决order未定义问题

问题背景 #

使用Datatable发起AJAX请求后，服务器端控制台打印出以下Null原型对象：

[Object: null prototype] {
  draw: '1',
  'columns[0][data]': 'no',
  'columns[0][name]': '',
  'columns[0][searchable]': 'true',
  'columns[0][orderable]': 'true',
  'columns[0][search][value]': '',
  'columns[0][search][regex]': 'false',
  'columns[1][data]': 'projectName',
  ...
  'search[value]': '',
  'search[regex]': 'false',
  projectName: ''
}

客户端JS函数：

function getSettingInfo() {
    $('#settingInfo').show();

    $('#settingInfo').DataTable({
        destroy: true,
        processing: true,
        serverSide: true,
        searching: false,
        ajax: {
            type: 'POST',
            url: '/setting/getSettingInfo',
            data: function(d) {
                d.projectName = '';
            }
        },
        iDisplayLength: 10,
        order: [[0, 'desc']],
        pagingType: 'simple_numbers',
        columnDefs: [
            { className: "dt-head-center", targets: [0, 1, 2, 3, 4] },
            { className: "dt-center", targets: [0, 1, 2, 3, 4] },
        ],
        columns: [
            { data : "no", width : '6%'},
            { data : "name", width : '13%'},
            { data : "key", width : '17%'},
            { data : "description", width : '32%'},
            { data : "use", width : '32%'}
        ]
    });
}

服务器端路由代码：

router.post('/getSettingInfo', async function (req, res) {
    let param = req.body;
    console.log('\n\nparam', param);
}

需要解决两个问题：

1. 如何将该Null原型对象转换为普通对象类型？
2. 服务器代码中param.order输出为undefined，该如何解决？

一、将Null原型对象转换为普通对象 #

有三种常用方法实现转换：

方法1：使用Object.assign() #

以空对象为目标，复制Null原型对象的所有属性：

router.post('/getSettingInfo', async function (req, res) {
    let param = Object.assign({}, req.body);
    console.log('\n\nparam', param); // 转换后的普通对象
}

方法2：使用对象解构语法 #

利用ES6解构特性快速复制属性：

router.post('/getSettingInfo', async function (req, res) {
    let param = { ...req.body };
    console.log('\n\nparam', param); // 转换后的普通对象
}

方法3：手动遍历赋值 #

适合需要自定义处理属性的场景：

router.post('/getSettingInfo', async function (req, res) {
    let param = {};
    for (const key in req.body) {
        param[key] = req.body[key];
    }
    console.log('\n\nparam', param); // 转换后的普通对象
}

二、解决param.order输出undefined的问题 #

核心原因是服务器端请求体解析器未正确解析嵌套格式参数，Datatable发送的order、columns为嵌套结构，需配置解析器支持嵌套解析。

解决步骤： #

1. 配置请求体解析器支持嵌套参数
   若使用Express框架，需在urlencoded解析器中开启extended: true（Express 4.16+可用内置解析器，旧版本需用body-parser包）：

   // Express 4.16+ 版本
   const express = require('express');
   const app = express();
   
   // 启用嵌套参数解析
   app.use(express.urlencoded({ extended: true }));
   
   // 旧版本使用body-parser的情况
   // const bodyParser = require('body-parser');
   // app.use(bodyParser.urlencoded({ extended: true }));
   

2. 转换请求体为普通对象
   解析后的嵌套参数会被映射为对象/数组，转换为普通对象后即可正常访问param.order：

   router.post('/getSettingInfo', async function (req, res) {
       let param = { ...req.body };
       console.log(param.order); // 输出示例: [ { column: 0, dir: 'desc' } ]
   }
   

内容的提问来源于stack exchange，提问作者WJK