2015-12-10 10 views
1

У меня есть список пользовательских входов в данных объекта. (например, data.username, data.password, data.age)отправить несколько объектов через ajax (используя угловой)

Я передаю объект данных на бэкэнд, как это, используя угловые.

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

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

Я передаю еще два объекта. выбор и сетка. как я могу передать все эти три вместе в одном вызове ajax? или я должен передавать его самостоятельно. это повлияет на производительность, если я передам эти данные отдельно.

Могу ли я сделать что-то подобное, чтобы отправить объект вместе одним вызовом ajax?

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

Как я могу получить его отдельно на стороне сервера, используя C#, если они вообще передаются вместе.

Heres на 3 объекта, что мне нужно пройти

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

Какая серверная технология вы используете? WebAPI? MVC? – Jasen

+0

@ Jasen - использование mvc на стороне сервера. – Ayesha

+0

'$ .ajax' не является угловым, а вспомогательным методом в библиотеке jQuery. Вы должны ** не ** смешивать jQuery внутри ваших угловых контроллеров. Используйте службу '$ http', чтобы сделать веб-ави звонки с вашего углового кода. – Shyju

ответ

1

Вы можете отправить несколько объектов/переменных в 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); 
1

Вы используете 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 
    }); 
+0

@ b0redom- я попытаюсь использовать эту часть кода, упомянутого выше. – Ayesha

+0

@ bOredom- обновил мой вопрос с перечнем объектов, которые будут переданы, и понаблюдайте, какую информацию они будут иметь. изменится ли код, который вы упомянули? – Ayesha

+0

Смысл кода не будет. Очевидно, вам нужно будет исправить имена полей для соответствия. Похоже, что выбор - это просто список, поэтому вы можете просто использовать 'string []' вместо фактического объекта, если хотите. – b0redom

3

Если у вас есть модель представления, как это в вашей стороне сервера

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 
} 

Вы можете просто построить объект, который яваскрипт соответствует структуре модели представления и отправить его с помощью $http службы angualr в. Не нужно беспокоиться о настройке контента - типа или 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 
}); 
+0

@ Shyju- обновил мой вопрос со списком объектов, которые будут переданы, и понаблюдайте, какую информацию у каждого будет. будет ли указанный вами код изменяться в соответствии с обновленным вопросом? – Ayesha

+0

@Ayesha Я обновил свой ответ, чтобы отразить структуру данных, которую вы предоставили. – Shyju