有一个javascript对象数组作为ajax调用参数，没有jquery？

Question

我正在尝试将JavaScript对象数组发送到我的ASP.Net MVC控制器而不使用jQuery。我有一个像这样的JavaScript对象的简单数组......

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;
}

...我希望将它作为ajax调用的参数，如下所示：

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

到目前为止，我发现将参数传递给ajax调用（...Home/AjaxTester?id=15&name=dave）的方法适用于基本类型，但我找不到用更复杂的“复杂”类型做同样的方法。我愿意接受新的方法来参数化我的ajax调用，如果有更好的，甚至是一种新的方式来进行ajax调用，只要它是纯JavaScript，没有库，没有框架，或者其他什么。

这是我的MVC控制器......

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

    return Json(_someObjects);
}

...和接收参数的类

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

您需要将您的http方法从GET更改为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

确保添加setRequestHeader。如果要发送json对象，请将请求标头更改为以下内容：

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

我还建议删除查询参数并更新控制器以接受此类对象。您可能还需要在该参数旁边添加[FromBody]。

并且您的控制器应该更新类似于

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