AJAX请求如何使用动态可变的表单字段名作为提交参数？

问题原因 #

直接在对象字面量中使用变量作为键名时，JavaScript默认会将变量名直接作为字符串类型的键，不会读取变量中存储的实际字段名，所以导致请求参数不符合后端要求。

解决方案 #

方案1：使用ES6+ 计算属性名（推荐） #

只需要给动态键名包裹方括号[]即可，JS会先计算括号内变量的值，再将该值作为对象的键：

var dataString = {
    'u': opt_u_val,
    'id': opt_userid_val,
    [opt_email]: opt_email_val,
    [opt_name] : opt_name_val,
    [opt_phone] : opt_phone_val,
    [opt_business] : opt_business_val,
    [opt_unique_name] : ''
};

这种写法在所有现代浏览器（Chrome 47+、Firefox 41+、Edge 12+、Safari 10.1+）都可以正常支持。

方案2：ES5兼容写法 #

如果需要兼容旧版浏览器，可以先初始化对象，再通过方括号赋值的方式添加动态键：

// 先初始化固定参数
var dataString = {
    'u': opt_u_val,
    'id': opt_userid_val
};
// 动态添加可变参数
dataString[opt_email] = opt_email_val;
dataString[opt_name] = opt_name_val;
dataString[opt_phone] = opt_phone_val;
dataString[opt_business] = opt_business_val;
dataString[opt_unique_name] = '';

这种写法兼容所有主流浏览器包括IE8及以上版本。

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