如何通过AJAX以表单对象形式发送参数值？

问题根源 #

手动拼接URL编码字符串传输参数时，极易出现转义遗漏、特殊字符冲突问题，哪怕手动调用encodeURIComponent，也可能因为密码中存在%、=、&等特殊字符，导致后端解析参数时出现截断、转义错误。

最简修复方案（直接传递JS对象） #

无需手动编码、拼接参数，直接将参数写成普通JS对象传给data字段即可，jQuery会自动完成参数编码、表单格式拼接，完全规避特殊字符解析错误，和原有后端接收逻辑100%兼容：

function resetPW() {
    $.ajax({
        url: "/setnewpassword",
        type: "post",
        data: {
            username: $("#email").val(),
            password: $("#newpassword").val()
        }
    }).done(function (response) { 
        // 原有后续逻辑无需修改
        ... 
    });
}

方案说明 #

• 不需要手动调用encodeURIComponent处理参数，jQuery收到对象格式的data后会自动对所有键值对做标准URL编码，完美处理&、+、空格、中文、特殊符号等所有输入场景
• 不需要手动拼接key=value&key2=value2格式的字符串，避免出现符号写错、漏拼接的低级错误

表单对象（FormData）实现方案 #

如果需要用标准表单对象传输（后续可兼容文件上传等扩展场景），可以使用原生FormData对象实现：

function resetPW() {
    // 新建空白FormData表单对象
    var formData = new FormData();
    // 直接添加字段，无需做任何编码处理
    formData.append("username", $("#email").val());
    formData.append("password", $("#newpassword").val());

    $.ajax({
        url: "/setnewpassword",
        type: "post",
        data: formData,
        // FormData专属配置：禁止jQuery自动处理数据、禁止自动设置请求头
        processData: false,
        contentType: false
    }).done(function (response) { 
        // 原有后续逻辑无需修改
        ... 
    });
}

选型建议 #

• 仅提交文本类表单参数选第一种方案即可，代码更简洁，无需调整后端接收逻辑
• 后续有上传文件、二进制数据需求的场景选择第二种FormData方案

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