jquery自動將form表單封裝成json的具體實現

 這篇文章主要介紹了jquery自動將form表單封裝成json的具體實現,需要的朋友可以參考下

前端頁面：  代碼如下: <span style="font-size:14px;"> <form action="" method="post" id="tf">  <table width="100%" cellspacing="0" cellpadding="0" border="0">  <tr>  <th>  姓名：  </th>  <td>  <input type="text" id="txtUserName" name="model.UserName" />  </td>  <th>  聯系手機：  </th>  <td>  <input type="text" name="model.Mobile" id="txtMobile" maxlength="11" />  </td>  <th>  密碼：  </th>  <td>  <input type="password" name="model.Pwd" id="txtPwd" maxlength="11" />  </td>  </tr>  <tr>  <td style="text-align: center;" colspan="2">  <input type="button" value=" 提 交 " style="padding-top: 3px;" name="butsubmit"  id="butsubmit" />  </td>  </tr>  </table>  </form>  //提示到服務器  $(function () {  $("#butsubmit").click(function () {  var data = $("#tf").serializeArray(); //自動將form表單封裝成json      // $.ajax({  // type: "Post", //訪問WebService使用Post方式請求  // contentType: "application/json", //WebService 會返回Json類型  // url: "/home/ratearticle", //調用WebService的地址和方法名稱組合 ---- WsURL/方法名  // data: data, //這裡是要傳遞的參數，格式為 data: "{paraName:paraValue}",下面將會看到  // dataType: 'json',  // success: function (result) { //回調函數，result，返回值  // alert(result.UserName + result.Mobile + result.Pwd);  // }  // });    $.post("/home/ratearticle", data, RateArticleSuccess, "json");  });  })        //結果顯示    function RateArticleSuccess(result) {  alert(result.UserName + result.Mobile + result.Pwd);  }</span>    後端處理：   代碼如下: <span style="font-size:14px;">public JsonResult ratearticle(UserInfo model)  {  return Json(model);  }</span>