通过ajax发送多个对象（使用角度）

Question

我在对象“数据”中有一个用户输入列表。 （例如 data.username、data.password、data.age）

我正在使用 Angular 将数据对象传递给这样的后端。

var submits = "=" + JSON.stringify(data);

$.ajax({
            type: "POST",
            url: serviceURL,
            data: submits
});

我正在传递另外两个对象。选择和网格。我怎样才能在一个ajax调用中将这三个一起传递？还是我必须独立转移它。如果我单独传输这些细节会影响性能吗？

我可以做这样的事情在一个 ajax 调用中一起发送对象吗？

var data = {};
data[0] = data1;
data[1] = data2;

如果它们一起传递，我如何在服务器端使用 c# 单独检索它。

这是我需要通过的 3 个对象

data -->>         ["Raul","New York","31"]
selections-->>    ["dy.txt","my.txt","yy.txt"]
grid-->           ["sesion","id"]

Answer 1

假设您在服务器端有这样的视图模型

public class CreateUserViewModel
{
  public string UserName{set;get;}
  public string Location {set;get;}
  public int Age {set;get;}
}
public class RegisterViewModel
{
  public CreateUserViewModel User {set;get;}
  public List<string> Selections {set;get;}
  public List<string> Grid {set;get;}
}

还有一个像这样的 MVC 动作方法

public ActionResult Create(RegisterViewModel model)
{
  // read model and save and return some JSON response
}

您可以简单地构建与视图模型结构匹配的 javascript 对象，然后使用 angualr 的$http 服务发布它。无需担心设置 content-Type 或 Json 对其进行字符串化。 Angualr 会处理它。

var model={ User : {} ,Selections :[], Grid=[] };
model.User.Age =23;
model.User.UserName ="test";
model.User.Location="New York";

model.Selections.push("dy.txt");
model.Selections.push("some.txt");

model.Grid.push("session");
model.Grid.push("id");

var url="replcaeUrltoYourActionMethodHere";

$http.post(url, model)
.then(function(response)
{
  // do something with the response
  // var result= response.data
});

Answer 2

您可以使用 ajax 发送多个对象/变量：

var submits = "=" + JSON.stringify(data);
$.ajax({
        type: "POST",
        url: serviceURL,
        data: {submits : submits, data1:data1, data2:data2}
});

在您的 C# 中，您可以像现在处理提交一样访问 data1 和 2。 根据 data1 和 data2 中的内容，您可能需要先对其进行字符串化。

第二种选择：
如果你愿意，你也可以（但它更难看）一次在所有东西上使用 stringify 并且只传递字符串：

data = {};
data["data1"] = data1;
data["data2"] = data2;
var submits = "=" + JSON.stringify(data);

Answer 3

你在服务器上使用的是 WebApi 还是 MVC？如果是这样，最简单的方法是创建一个包含您需要发送的 3 个实体的类，并利用内置的model-binding

因此，在您的示例中，您列出了看起来是用户表单、选择和网格的内容。我不太确定最后两个是什么，但一个示例模型可能看起来像这样：

public class UserSubmissionViewModel
{
    public UserSubmissionViewModel() { }

    public UserFormModel User {get;set;}

    public SelectionsModel Selections { get; set; }

    public GridModel Grids { get; set; }
}

然后在您的 Web api 控制器或 MVC 控制器上，您将拥有如下方法：

public async Task<IHttpActionResult> Submit(UserSubmissionViewModel model)

您的 javascript 将大致如下所示：

var toSend = {"UserFormModel":data, "SelectionsModel":selections, "GridModel":grids};
$.ajax({
         type:"POST",
         data:toSend, //<--- you might need to JSON.stringify this, cant test this code at the moment
         url:serviceURL //<-- Calls your Submit method on the controller
    });