如何让后端将AJAX发送的序列化表单数据识别为JSON对象

问题概述 #

需要通过AJAX向服务器发送三个对象（Razorpay返回的payment、order，以及表单输入值），但使用$('#checkoutForm').serialize()获取的表单数据在服务器端被识别为字符串，无法正常作为JSON对象访问；单独发送表单数据或另外两个对象均无问题。

原因分析 #

serialize()方法返回的是URL编码的键值对字符串（如key1=value1&key2=value2），而非JSON对象。当把这个字符串作为data的一个属性值发送时，jQuery会直接将其作为字符串传递，服务器端自然会将其解析为字符串类型，而非解析成键值对对象。

解决方案 #

方法1：将表单序列化为JSON对象后发送 #

自定义工具函数把表单的serializeArray()结果转换为JSON对象，再和另外两个对象一起发送：

// 自定义工具函数：将表单序列化为JSON对象
function formToObject(formSelector) {
  const formData = {};
  $(formSelector).serializeArray().forEach(field => {
    formData[field.name] = field.value;
  });
  return formData;
}

// 支付验证AJAX调用
function verifyPayment(payment, order) {
  const formObj = formToObject('#checkoutForm');
  $.ajax({
    url: '/verify-payment',
    type: 'POST',
    data: {
      payment,
      order,
      formData: formObj, // 这里传的是JSON对象而非字符串
    },
    success: function (response) {
      console.log('payment status', response);
    },
    error: function (error) {
      console.log(error);
    },
  });
}

服务器端无需额外处理，req.body.formData会直接是JSON对象，可直接访问属性（如req.body.formData.fullName）。

方法2：发送完整JSON格式请求（推荐统一JSON传输） #

设置AJAX的contentType为application/json，将所有数据序列化为JSON字符串发送，服务器端需配置JSON解析中间件（如Express的express.json()）：

function verifyPayment(payment, order) {
  // 转换表单为JSON对象
  const formObj = {};
  $('#checkoutForm').serializeArray().forEach(field => {
    formObj[field.name] = field.value;
  });

  $.ajax({
    url: '/verify-payment',
    type: 'POST',
    contentType: 'application/json', // 指定请求为JSON格式
    data: JSON.stringify({
      payment,
      order,
      formData: formObj,
    }),
    success: function (response) {
      console.log('payment status', response);
    },
    error: function (error) {
      console.log(error);
    },
  });
}

服务器端配置（以Express为例）：

const express = require('express');
const app = express();

// 解析JSON格式的请求体
app.use(express.json());

app.post('/verify-payment', (req, res) => {
  console.log(typeof req.body.formData); // 输出：object
  // 直接访问表单属性
  console.log(req.body.formData.selectedAddress);
  res.send('验证成功');
});

方法3：使用FormData对象（适合含文件上传的场景） #

如果表单包含文件上传，可使用FormData对象，同时将payment和order序列化为字符串存入：

function verifyPayment(payment, order) {
  const formData = new FormData($('#checkoutForm')[0]);
  // 将对象转为字符串存入FormData
  formData.append('payment', JSON.stringify(payment));
  formData.append('order', JSON.stringify(order));

  $.ajax({
    url: '/verify-payment',
    type: 'POST',
    data: formData,
    contentType: false, // 让jQuery自动设置正确的Content-Type
    processData: false, // 禁止jQuery处理FormData
    success: function (response) {
      console.log('payment status', response);
    },
    error: function (error) {
      console.log(error);
    },
  });
}

服务器端需解析字符串为对象（以Express为例，需使用multer中间件处理FormData）：

const multer = require('multer');
const upload = multer();

app.post('/verify-payment', upload.none(), (req, res) => {
  const payment = JSON.parse(req.body.payment);
  const order = JSON.parse(req.body.order);
  const formData = req.body; // 表单字段直接作为对象访问
  console.log(typeof formData); // 输出：object
  res.send('验证成功');
});

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