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

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>

时间: 2024-11-05 14:48:00

form表单转换为Json字符串数据的相关文章

javascript-js将form表单序列化[json字符串、数组、对象]

1.序列化为字符串 $("#Form").serialize();//name=zhangsan&sex=1&age=20   2.序列化为数组 $("#form").serializeArray();//[Object, Object, Object] 3.序列化为对象 function getFormJson(form) { var o = {}; var a = $(form).serializeArray(); $.each(a, funct

form表单转换为json格式,支持数组

$.fn.serializeObject = function () { var keyValues = this.serializeArray(); var pattern=/\[(\d+)\]/; var filter_keys = [], normal_keys = keyValues.filter(function (v, i) { if (~v.name.indexOf('.')||~pattern.test(v.name)) { filter_keys.push(v); return

将Form表单转换为JSON格式

/********************************** * * 发送短信的JS * **********************************/ (function($) { $.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name]) { if (!o[this.name].push) { o

form表单转化json对象

利用 $.fn 可以让每一个jquery 对象都能直接使用这个方法. //form表单转化json对象$.fn.serializeObject = function () { var o = {}; var a = this.serializeArray(); $.each(a, function () { if (o[this.name]) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].pus

Form表单Ajax系列化提交数据

页面上有一个商品的颜色尺码二维输入框,输入完毕之后需要把数据进行提交,点击立即购买则进行页面的跳转,通过form表单将数据提交到后台,而点击添加到购物车的话,则会通过ajax进行数据的提交,页面不进行跳转.前台样式: 下面是form表单: <form id="cartForm" action="${ctx}/cart/save" method="post"> <div class="product-page-optio

以form表单重用方式进行数据列表行删除

〇.使用框架与技术 后:Java.Spring Boot: 前:JQuery. 一.需求 1.当我们在页面点击每行的删除按钮时,需要服务端进行数据库操作,此时得通过form表单向服务端提交一个http请求. 2.我们当然可以把整个列表套在一个form表单里.但又由于某些原因,不能把列表套在form表单中. 3.并且我们又不想把form表单一个个写在每行的删除按钮下. 二.解决 利用JQuery按钮点击事件使得form表单重用. 1.写一个form表单(注意要有id) 1 <!-- 2 this

nodejs-http 对form表单上传文件数据的解析过程

前几天碰到了一个需求,允许接收前端用户上传的文件. 当时为了解决问题索性就上github搜了下,找了一个基于nodejs的开发插件. 后来功能实现后觉得意犹未尽,于是自己想试试去写一个类似功能的插件,方便以后拓展,然后就这么开始了. 先来说说应用层的http,数据从前端是怎么被它包装然后传到服务器的. 我们可以在浏览器中查看我们发一个请求的时候包什么格式的,例如我们访问百度时得到的请求包内容: Remote Address:180.97.33.107:443 Request URL:https:

JQuery扩展方法实现Form表单与Json互相转换

1.把表单转换出json对象 //把表单转换出json对象 $.fn.toJson = function () { var self = this, json = {}, push_counters = {}, patterns = { "validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/, "key": /[a-zA-Z0-9_]+|(?=\[\])/g, "push&qu

微信小程序--获取form表单初始值提交数据

<form bindsubmit="formSubmit"> <view class="txt"> <view class="ima"></view> <view class="txt2">姓名</view> <input placeholder="请输入姓名" maxlength="10" class=&qu