首页 > Web开发 > 详细

form表单转换为Json字符串数据

时间:2017-04-29 00:56:31      阅读:339      评论:0      收藏:0      [点我收藏+]

https://github.com/marioizquierdo/jquery.serializeJSON

效果图

技术分享

加载使用

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.serializejson.js"></script>

form表单页面代码

技术分享
<form id="formDemo" class="layui-form">
    <table class="layui-table" lay-even>
        <colgroup>
            <col width="100">
            <col width="200">
            <col>
        </colgroup>
        <tbody>
            <tr>
                <th>用户名</th>
                <td id="userName">
                    <div class="layui-form-item layui-input-inline">
                        <input tyep="text" name="userName" class="layui-input">
                    </div>
                </td>
            </tr>
            
            
            <tr>
                <th>登录密码</th>
                <td id="password">
                    <div class="layui-form-item layui-input-inline">
                        <input tyep="text" name="password" class="layui-input">
                    </div>
                </td>
            </tr>
            
            <tr>
                <th>用户权限</th>
                <td id="role">
                    <div class="layui-form-item layui-input-inline">
                      <input type="text" name="role" class="layui-input" readOnly="true" value="管理员">
                    </div>
                </td>
            </tr>
            <tr>
                <th>手机号</th>
                <td id="phone">
                    <div class="layui-form-item layui-input-inline">
                        <input tyep="text" name="phone" class="layui-input">
                    </div>
                </td>
            </tr>
            <tr>
                <th>用户备注</th>
                <td id="nickName">
                    <div class="layui-form-item layui-input-inline">
                        <input tyep="text" name="nickName" class="layui-input">
                    </div>
                </td>
            </tr>
            
        </tbody>
    </table>
 </form>
技术分享

序列化

技术分享
<script type="text/javascript">
    function getUser(){
        console.log($(‘#formDemo‘).serializeJSON());
        console.log(JSON.stringify($(‘#formDemo‘).serializeJSON()));
        return JSON.stringify($(‘#formDemo‘).serializeJSON());
    }
</script>
技术分享
$(‘#formDemo‘).serializeJSON()返回的是一个Object体
{userName: "test", password: "test", role: "管理员", phone: "18888888866", nickName: "测试"}
JSON.stringify($(‘#formDemo‘).serializeJSON())返回的是JSON字符串
{"userName":"test","password":"test","role":"管理员","phone":"18888888866","nickName":"测试"}

使用Ajax传递给后台使用@RequestBody进行接收

技术分享
<script type="text/javascript">
    function addUser(){
        var data = getUser();
        $.ajax({
         type: "POST",
         url: "${ctx}/auth/user/create",
         data: data,
         dataType: "json",
         contentType:"application/json",
         success: function(data){
            alert(data.message);
             if(data.code==0){
                 layer.closeAll();
                 window.location.href="${ctx}/auth/users";
             }
          }
        });
    }
    
</script>
技术分享

 

若要在JS中获取键值对中的值可以进行如下处理

技术分享
<script type="text/javascript">
    var data = getUser();
    var obj = eval("("+data+")");
    alert(obj.userName);
    
</script>
技术分享

form表单转换为Json字符串数据

原文:http://www.cnblogs.com/FrankLei/p/6783965.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!