[英]How to serialize the form fields and send it to server, jquery?
I have a form in HTML
which contains multiple same name fields. 我有一个HTML
,包含多个相同的名称字段。 For example: 例如:
<form action="" method="post" id="form">
<div class="itemsection" id="item1">
<input type="text" name="Price" />
<input type="text" name="Name" />
<input type="text" name="Catagory" />
</div>
<div class="itemsection" id="item2">
<input type="text" name="Price" />
<input type="text" name="Product" />
<input type="text" name="Catagory" />
</div>
<div class="itemsection" id="item3">
<input type="text" name="Price" />
<input type="text" name="Product" />
<input type="text" name="Catagory" />
</div>
</form>
Now on the server side (C#), I have an action method and a model class Product
: 现在在服务器端(C#),我有一个动作方法和一个模型类Product
:
//Action method accepts the form on server //It require the Product array
public ActionResult SaveItem(Product[] products)
{
.....
...
}
//Model class product
public Class Product
{
public int Id { get; set; }
public double Price { get; set; }
public string Name { get; set; }
public string Catagory { get; set; }
}
Now my question is: I am submitting the form using jquery $.ajax method
. 现在我的问题是:我使用jquery $.ajax method
提交表单。 On the server side the action method accepts a Product
class array. 在服务器端,action方法接受Product
类数组。 Now how can I convert the form fields into a Json
array (similar to product array). 现在我如何将表单字段转换为Json
数组(类似于产品数组)。 I tried: 我试过了:
$("#form").serialize();
&
$("#form").serializeArray();
The first generates the name-value pair of all the form fields and the second generates the name-value array of all the form fields. 第一个生成所有表单字段的名称 - 值对,第二个生成所有表单字段的名称 - 值数组。 And my requirement is: 我的要求是:
//currently my form contains 3 item section so :
[
{ "Price" : "value", "Name" : "value", "Catagory" : "value" },
{ "Price" : "value", "Name" : "value", "Catagory" : "value" }
{ "Price" : "value", "Name" : "value", "Catagory" : "value" }
]
Can anyone tell me how can I can achieve this through JavaScript
or JQuery
? 任何人都可以告诉我如何通过JavaScript
或JQuery
实现这一目标?
You can use the map
method. 您可以使用map
方法。
var data = $('.itemsection').map(function(){
return {
Price: $('input[name="Price"]', this).val(),
Product: $('input[name="Product"]', this).val(),
Category: $('input[name="Category"]', this).val()
}
}).get();
If that's the case you can use .map()
如果是这种情况你可以使用.map()
var arr = $('form :input').map(function() {
return { 'Price' : $(this).attr('Price') ,
'Name' : $(this).attr('Name') ,
'Category' : $(this).attr('Category') ,
}
}).get(); // get() will convert them into an array
您还可以使用jQuery ++的formParams http://jquerypp.com/#formparams
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.