调用preventDefault()后如何发送加密后的表单数据？

拦截默认提交事件后，需要把加密后的数据绑定到请求中才能发给后端，下面给两种生产可用的实现，按需选择即可。

方案1：隐藏域注入提交（兼容原生表单跳转） #

适合需要保留表单默认提交行为（提交后跳转/刷新页面）的场景，不需要改原有表单的提交目标、方法配置，代码如下：

$("form").on("submit", function (event) {
  // 加状态位防止递归触发提交
  if ($(this).data("isEncrypted")) return true;
  event.preventDefault();

  // 提取原始表单明文
  const rawFormStr = $(this).serialize();
  // AES加密
  const encryptedPayload = CryptoJS.AES.encrypt(rawFormStr, "你的加密密钥").toString();

  // 清空原表单所有字段，避免明文被一起提交
  $(this).find("input, select, textarea").not('[type="submit"]').val("");
  // 插入隐藏字段存放加密数据
  $("<input>", {
    type: "hidden",
    name: "encrypted_data",
    value: encryptedPayload
  }).appendTo(this);

  // 标记加密完成，放行提交
  $(this).data("isEncrypted", true);
  $(this).submit();
});

后端逻辑只需要接收encrypted_data参数，用对应AES密钥解密后，得到的就是标准urlencoded格式的表单字符串，按常规表单参数解析即可。

方案2：AJAX异步提交（适合无刷新场景） #

如果业务是无刷新交互，不需要原生表单的跳转行为，直接用异步请求发加密数据更简单：

$("form").on("submit", function (event) {
  event.preventDefault();
  const $form = $(this);

  // 序列化+加密
  const rawFormStr = $form.serialize();
  const encryptedPayload = CryptoJS.AES.encrypt(rawFormStr, "你的加密密钥").toString();

  // 发送异步请求
  $.ajax({
    url: $form.attr("action"),
    type: $form.attr("method") || "POST",
    data: { encrypted_data: encryptedPayload },
    success: function (response) {
      // 自定义提交成功逻辑，比如提示、跳转、局部刷新
    },
    error: function (xhr) {
      // 自定义错误处理逻辑
    }
  });
});

注意事项 #

• 前端硬编码的密钥不存在绝对安全性，用户可以通过浏览器调试工具拿到密钥，这种加密方式只能避免明文直接在链路传输，必须配合HTTPS使用才能保证传输安全
• 注入隐藏域前一定要清空原表单的明文字段，否则会出现加密串和明文同时提交的问题
• CryptoJS的AES默认采用CBC模式、Pkcs7填充，后端解密时要对齐参数配置，否则会解密失败

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