很常见的业务场景，就是前端一个表单，submit给后台，在web.form时代，有from 的runat="server" 配合submit 自动会提交给服务端，然后服务端解析Request装填对象。 如果要是异步提交的话，就麻烦点，from表单不会自动把你的所有value传给后台，于是就一个一个获取value值，通过json对象异步提交给后台，然后再由后台一个一个解析，再封装给对象。
$.post("Handler1.ashx", { Name: $("#txtName").val(), Age: $("#txtAge").val() }, function (res)
{...})
很庆幸的是上面只有2个参数，如果需要提交有10多个参数的话，用这种方法相信大家都有手疼的感觉。
幸亏在jquery上有serializeArray方法，可以不关心表单内容，只要有name属性，就会直接匹配value或者test值，生成一个json对象。如下：
<form id="createStudent_form" runat="server"> <table> <tr><td>Name:</td><td><input type="text" name="Name" /></td></tr> <tr><td>Address:</td><td><input type="text" name="Address" /></td></tr> <tr><td>Sex:</td><td>男<input type="radio" name="Sex" value="1" /> 女<input type="radio" name="Sex" value="0" /></td></tr> <tr><td>Remark:</td><td><textarea name="Remark"></textarea></td></tr> <tr><td><input type="button" value="submit" id="submit_btn" /></td></tr> </table> </form>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script>
$(function () {
$("#submit_btn").click(function () {
var json = $("#createStudent_form").serializeArray();
console.log(JSON.stringify(json));
});
})
</script>
点击提交表单，打印出来的结果是：
[{"name":"__VIEWSTATE","value":"fO0ZxNMqIPEgrnZBjZiR5a97V4u8fbMcDpPStT/X97Cpp7vbUjNufjDdDOZHM9ey+6OYvgcTT5+6sQKR+z1cX2vB+INYHkDkWLSKiEgOuEI="},{"name":"Name","value":"2323"},{"name":"Address","value":"3223"},{"name":"Sex","value":"1"},{"name":"Remark","value":"23232"},{"name":"__VIEWSTATEGENERATOR","value":"2D79A64A"}]
一看是个json 对象数组，除了第一个是webForm独有的shit东西以外，其他大家一眼可以看出来是name，value两个键值对相匹配。这与我们想要得到的格式{name:value}还不太一致，当然jquery做到这一步已经不错了（其实内部实现原理也不难，拿到表单一一遍历组成Json），剩下的就需要咱们自己扩展了。简单改造如下：
$.fn.serializeJson = function () { var resultJson = {}; var array = this.serializeArray(); $(array).each(function () { resultJson[this.name]=this.value; }); return resultJson; };
通过上面的方法就得到了咱们想要的结果集了，但是这只是最基本的扩展，你可以继续深化比如支持相同内容的多个表单提交，支持相同name的多选框等等。
咱们异步提交给后端看看：
$("#submit_btn").click(function () {
var StudentModel = $("#createStudent_form").serializeJson();
console.log(JSON.stringify(StudentModel));
$.post("Handler1.ashx", StudentModel, function (res) {
}).error(function ()
{ alert("error!") })
});
})
相信到了这一步后，用过Mvc的小伙伴们看了一下子就兴奋起来了，因为Action会自动转化类型，只要你在后台定义过一个StudentModel对象，其参数和name一致，然后不用关系Requset就可以直接拿到了对象的值，这简直是爽呆了，几乎是太简单了。如下：
//前面省略不少句 public ActionResult SubmitStudent(StudentModel model) { //... return Content("ok"); } } public class StudentModel { public string Name { get; set; } public int Age { get; set; } public bool Sex { get; set; } public string Address { get; set; } public string Remark { get; set; } }
如果要是web.Form呢？没有Mvc那一套转化机制该怎么办？凉拌，自己写方法解决，简单如下：
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; NameValueCollection parms = context.Request.Params; StudentModel model = ParesParms<StudentModel>(parms); } public T ParesParms<T>(NameValueCollection parms) where T : new() { T entity = new T(); Type type = typeof(T); var keys = parms.AllKeys; ; //反射对象的属性 var propes = type.GetProperties(); foreach (var prop in propes) { if (keys.Contains(prop.Name)) {//给对象赋值 prop.SetValue(entity, parms[prop.Name]); } } return entity; }
希望能多少给你点帮助。
对象化前端表单（Form）提交,布布扣,bubuko.com
原文：http://www.cnblogs.com/lpfsky/p/3634209.html