对象化前端表单（Form）提交

很常见的业务场景，就是前端一个表单，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"}]

结果