jquery自动将form表单封装成json

来源:互联网 发布:2016年百万公众网络 编辑:程序博客网 时间:2024/04/30 13:37

 <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);
        }

 

 

action处理

public JsonResult ratearticle(UserInfo model)
        {
            return Json(model);
        }

原创粉丝点击