具有动态表单字段名称的 AJAX 数据

Question

你好，怎样才能让我的ajax数据调用是动态的，我试过这个

var opt_name = $(".NAME").data('opt_name');
    var opt_business = $(".BUSINESS").data('opt_business');
    var opt_phone = $(".PHONE").data('opt_phone');
    var opt_email = $(".EMAIL").data('opt_email');
    var opt_unique_name=$(".UNIQUE_NAME").data('opt_unique_name');
    
    var opt_name_val = $(".NAME")[key].value;
    var opt_business_val = $(".BUSINESS")[key].value;
    var opt_phone_val = $(".PHONE")[key].value;
    var opt_email_val = $(".EMAIL")[key].value;
    var opt_u_val = $(".U_VAL").data('opt_u_val');
    var opt_userid_val = $(".USER_ID_VAL").data('opt_user_id_val');
    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 : ''};
    $.ajax({
        type: 'post',
        url: 'https://vative.us15.list-manage.com/subscribe/post',
      
        dataType: "json",
      data: dataString, // should be the same as below
      // data: {
        //     'u': '559dd913b49efd5f5515155bb',
        //     'id': '0985c209f3',
        //     'MERGE0': opt_email_val,
        //     'NAME' : 'Test 3',
        //     'PHONE' : '829121',
        //     'BUSINESS' : 'hskslas',
        //     'b_559dd913b49efd5f5515155bb_0985c209f3' : ''
        // },
        success: function(data) {
            console.log('Submitted');
        },
        
        error: function(data){
            console.log('Error');
          console.log(dataString);
        }
    });
}
 

});

我只想获取字段名称，因为此字段名称总是根据数据库或嵌入式表单而变化。

我上面代码的问题是这会起作用。

data: {
             'u': '559dd913b49efd5f5515155bb',
             'id': '0985c209f3',
             'MERGE0': opt_email_val,
             'NAME' : 'Test 3',
             'PHONE' : '829121',
             'BUSINESS' : 'hskslas',
             'b_559dd913b49efd5f5515155bb_0985c209f3' : ''
         },

但不是这个

 data: {'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 : ''};

Answer 1

为了在对象内部生成动态键，在 JavaScript 的新 ES2015 标准（以前称为 ES6）中有一种非常简洁的方法。

语法如下：

var obj = {
  [myKey]: value,
}

所以你的代码应该是这样的：

data: {'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]: ''
};

Answer 2

听起来您的目标是在数据对象中拥有动态键？

您的示例不起作用的原因是实例化一个对象使用键的字面值（所以基本上是一个字符串），而您想要的是范围内变量的字符串值。

做起来有点乱，但我能想到两种可能：

data = {};
data[opt_email] = opt_email_val;
data[opt_phone] = opt_phone_val;
// and so on for each dynamic key to value

或者，以下 可能 工作（根据您的目标进行转译后），虽然我没有尝试过：

data = {
`${opt_email}`: opt_email_val,
`${opt_phone}`: opt_phone_val,
// and so forth
};

第二个示例使用Template literal syntax 工作，它将获取变量的值并将其扩展为字符串。