您现在的位置: 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文

jquery自动将form表单封装成json的具体实现

作者:佚名    责任编辑:admin    更新时间:2022-06-22

 这篇文章主要介绍了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>