zoukankan      html  css  js  c++  java
  • jquery自动将form表单封装成json

     <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);
            }
  • 相关阅读:
    解决deepin没有ll等命令的办法
    解决客户端Redis中文乱码问题
    Redis 常用命令操作
    Redis常用数据类型
    Redis 入门
    Ubuntu18.04 安装netstat
    Ubuntu18.04 安装redis
    常用sql:按照表中的某一列对数据进行分组,统计数据条数
    date( ) 日期函数
    tp5 apache 转 nginx 需要配置的伪静态
  • 原文地址:https://www.cnblogs.com/tony-hyn/p/6370769.html
Copyright © 2011-2022 走看看