需要在ajax表单提交使用js/jquery之前创建数组/json。

I am facing issue in creating json after form submit- I want to send json to ajax call - required json is below

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

{
"person": {
    "firstName": "amr",
    "middleName": "m",
    "lastName": "k",
    "emailId": "[e-mail]",
    "mobileNumber": "454564333",
    "mobileCountryCode": "+91"
},
"informationSource": [
    {"id": "1"}, {"id": "2"}
],
"loginPassword": "password"
}

All above fields are in form- I want to submit the form using ajax, below is the code -

以上所有字段都是表单——我想使用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;");
  }
});

But this code is not working, This is giving me undefined while pushing array - Please help in creating the required json/array to send through ajax.

但是这段代码没有工作，这在push数组时给了我一个未定义的代码——请帮助创建所需的json/数组以通过ajax发送。

4 个解决方案

#1

It would help to see your HTML, however the main issue you have is that you're pushing multiple objects to an array instead of the target data structure which is an object containing properties. You can also simplify the code slightly by using map(). Try this:

它会帮助你看到你的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();
  }
});

#2

The problem you are having here is that you are sending an array while jQuery/Ajax/data expects an object. Instead of sending an array, try doing like this:

您在这里遇到的问题是，当jQuery/Ajax/数据期望一个对象时，您正在发送一个数组。不要发送数组，试试这样做:

const array_data = {
    informationSource,
    password,
    person
};

This should solve your problem.

这应该能解决你的问题。

#3

Replace

取代

array_data.push({informationSource: informationSource});
array_data.push({password});
array_data.push({person: person});

with :

:

var object ={
    person,
    informationSource,
    loginPassword: $('#password').val()
}
array_data.push(object);

#4

As far as I can see, you need to send one object:

在我看来，你需要发送一个对象:

{
"person": {
    "firstName": "amr",
    "middleName": "m",
    "lastName": "k",
    "emailId": "[e-mail]",
    "mobileNumber": "454564333",
    "mobileCountryCode": "+91"
},
"informationSource": [
    {"id": "1"}, {"id": "2"}
],
"loginPassword": "password"
}

And you're trying to send one array of objects:

你要发送一个对象数组

[
    {
        "person": {
            "firstName": "amr",
            "middleName": "m",
            "lastName": "k",
            "emailId": "[e-mail]",
            "mobileNumber": "454564333",
            "mobileCountryCode": "+91"
        }
    },
    {
        "informationSource": [
            {"id": "1"}, {"id": "2"}
        ],
    },
    {
        "loginPassword": "password"
    }
]

To solve your issue, instead of using .push(), set the properties in your object:

要解决您的问题，请在对象中设置属性，而不是使用.push():

var 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() });
});

var data = {
    person : person,
    informationSource : informationSource,
    loginPassword : loginPassword,
}