如何将JavaScript对象转为jQuery Ajax风格的Form Data并通过XHR发送

有三种可靠的方法可以实现你的需求，生成和jQuery Ajax完全一致的application/x-www-form-urlencoded格式数据，让PHP端能直接通过$_POST获取参数：

方法1：使用URLSearchParams（推荐，现代浏览器友好） #

这是最简洁的方式，现代浏览器原生支持，能直接把对象转换成符合要求的URL编码字符串：

const formDataObject = {
    first: 'a',
    second: 'b',
    third: 'c'
};

const xhr = new XMLHttpRequest();
xhr.open('POST', '你的PHP接口地址', true);
// 设置与jQuery默认Ajax一致的请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');

// 将对象转换为URL编码参数
const params = new URLSearchParams(formDataObject);
xhr.send(params);

发送后，PHP端可以直接通过$_POST['first']、$_POST['second']获取参数，和jQuery发送的请求效果完全一致。

方法2：使用FormData对象 #

如果需要处理文件上传（你当前场景不需要，但可作为扩展方案），或者偏好FormData的方式，也可以手动构建FormData：

const formDataObject = {
    first: 'a',
    second: 'b',
    third: 'c'
};

const formData = new FormData();
// 遍历对象添加所有键值对
for (const key in formDataObject) {
    if (Object.prototype.hasOwnProperty.call(formDataObject, key)) {
        formData.append(key, formDataObject[key]);
    }
}

const xhr = new XMLHttpRequest();
xhr.open('POST', '你的PHP接口地址', true);
// 使用FormData时无需手动设置Content-Type，浏览器会自动添加带boundary的multipart/form-data头
// 注：这种格式PHP依然能通过$_POST获取参数，但请求头和jQuery默认的application/x-www-form-urlencoded不同，如果要完全匹配，优先选方法1
xhr.send(formData);

方法3：手动拼接参数（兼容老浏览器） #

如果需要兼容IE等不支持URLSearchParams的老浏览器，可以自己写一个转换函数：

// 自定义对象转URL编码参数函数
function objToFormParams(obj) {
    return Object.keys(obj).map(key => {
        // 对键和值进行URI编码，避免特殊字符问题
        const encodedKey = encodeURIComponent(key);
        const encodedValue = encodeURIComponent(obj[key]);
        return `${encodedKey}=${encodedValue}`;
    }).join('&');
}

const formDataObject = {
    first: 'a',
    second: 'b',
    third: 'c'
};

const params = objToFormParams(formDataObject);
const xhr = new XMLHttpRequest();
xhr.open('POST', '你的PHP接口地址', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xhr.send(params);

以上三种方法都能实现你的需求，其中方法1最简洁且和jQuery默认请求格式完全一致，优先推荐。

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