Having an array of javascript objects as an ajax call parameter, without jquery?

Question

I'm trying to send an array of JavaScript objects to my ASP.Net MVC controller without using jQuery . I have a simple array of JavaScript objects like this...

var data = [];

data.push(new person(1, "David"));
data.push(new person(2, "Karine"));
data.push(new person(2, "Annie"));
...etc

function person(_id, _name) {
    this.id = _id;
    this.name = _name;
}

...and I would like to have it as a parameter of an ajax call like this:

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4) {
            if (xmlhttp.status == 200) {
                    var obj = JSON.parse(xmlhttp.responseText);
                        for (var i = 0; i < obj.length; i++) {                                                
                            if (i == 1) {
                                    alert(obj[i].name);}
                        }
                }
                else {
                    alert('There is an error');
                }
    }
};

xmlhttp.open("GET", "/Home/AjaxTester?id=15&name=dave", true);                             
xmlhttp.send();

The way I found so far to pass parameters to an ajax call, which is ...Home/AjaxTester?id=15&name=dave , works fine for basic types, but I can't find a way to do the same with more "complex" types. I'm open to new ways to parameterize my ajax call if anything better, or even a new way to make an ajax call, as long as it is pure JavaScript, no library, no framework, or whatever.

Here's my MVC controller...

public JsonResult AjaxTester(List<Person> _person)
{
    //Whatever Logic...

    return Json(_someObjects);
}

...and the class of the received parameter

public class Person
{
    public int id { get; set; } = 0;      
        public string name { get; set; } = "";

        public Person(int _id, string _name)
        {
            this.id = _id;
            this.name = _name;
        }
}

Answer 1

您需要在参数之前使用FromUri命令，如下所示：

public JsonResult AjaxTester(FromUri List<Person> _person)

Answer 2

You need to change your http method from GET to POST.

xmlhttp.open("POST", "/Home/AjaxTester?id=15&name=dave", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(JSON.stringify(data)); 

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send

Make sure you add the setRequestHeader. If you are sending a json object then change the request header to the following:

xhr.setRequestHeader("Content-type", "application/json");

I would also recommend removing the query parameter and updating the controller to accept this type of object. You may also need to add the [FromBody] in next to that parameter.

And your controller should be updated similar to

public JsonResult AjaxTester([FromBody] List<Person> _person)