javascript - 使用 js/jquery 在 ajax 表单提交之前需要创建 array/json

Question

我在表单提交后创建 json 时遇到问题 - 我想将 json 发送到 ajax 调用 - 所需的 json 如下

{
"person": {
    "firstName": "amr",
    "middleName": "m",
    "lastName": "k",
    "emailId": "amr1@s.in",
    "mobileNumber": "454564333",
    "mobileCountryCode": "+91"
},
"informationSource": [
    {"id": "1"}, {"id": "2"}
],
"loginPassword": "password"
}

以上所有字段都在表单中 - 我想使用ajax提交表单，下面是代码 -

var array_data = [];
var password = {
  loginPassword: $('#password').val()
};
var person = {
  firstName: $('#first_name').val(),
  middleName: $('#middle_name').val(),
  lastName: $('#last_name').val(),
  emailId: $('#email').val(),
  mobileNumber: $('#mobile_no').val(),
  mobileCountryCode: $('#country_code').val()
};
var informationSource = [];
$.each($("#hear option:selected"), function() {
  informationSource.push({
    id: $(this).text()
  });
});
array_data.push({
  informationSource: informationSource
});
array_data.push({
  password
});
array_data.push({
  person: person
});
console.log(array_data);

$.ajax({
  url: "api.php",
  type: "POST",
  //dataType: "json",
  data: array_data,
  beforeSend: function(xhr, settings) {
    xhr.setRequestHeader('Authorization', 'Bearer ' + acc_token);
  },
  success: function(response) {
    $('#res-div').css("display:block;");
    $('#signup-div').css("display:none;");
  }
});

但是这段代码不起作用，这在推送数组时给我未定义 - 请帮助创建通过ajax发送所需的json/数组。

Answer 1

这将有助于查看您的 HTML，但是您遇到的主要问题是您将多个对象推送到数组而不是目标数据结构，目标数据结构是包含属性的对象。您还可以使用 map() 稍微简化代码。试试这个:

var obj = {
  person: {
    firstName: $('#first_name').val(),
    middleName: $('#middle_name').val(),
    lastName: $('#last_name').val(),
    emailId: $('#email').val(),
    mobileNumber: $('#mobile_no').val(),
    mobileCountryCode: $('#country_code').val()
  },
  informationSource: $("#hear option:selected").map(function() {
    return {
      id: $(this).text()
    };
  }).get(),
  loginPassword: $('#password').val()
};

$.ajax({
  url: "api.php",
  type: "POST",
  data: obj,
  beforeSend: function(xhr, settings) {
    xhr.setRequestHeader('Authorization', 'Bearer ' + acc_token);
  },
  success: function(response) {
    $('#res-div').show();
    $('#signup-div').hide();
  }
});