html表单序列化和json操作

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus?">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
 </head>
 <body>
    <form id="myform">
        <table>
            <tr>
                <td>姓名:</td>
                <td> <input type="text" name="name" value="旺旺"/> </td>
            </tr>
            <tr>
                <td>性别:</td>
                <td>
                    <input type="radio" name="sex" value="男" checked> 男
                    <input type="radio" name="sex" value="女"> 女
                </td>
            </tr>
            <tr>
                <td>年龄:</td>
                <td>
                    <select name="age">
                        <option value="10">10</option>
                        <option value="20" selected>20</option>
                        <option value="30">30</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>爱好:</td>
                <td>
                    <input type="checkbox" value="read" name="hobby" checked>读书
                    <input type="checkbox" value="music" name="hobby" checked>音乐
                    <input type="checkbox" value="draw" name="hobby" checked>画画
                    <input type="checkbox" value="sport" name="hobby">运动
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" id="submitBtn" value="提交" />
                </td>
            </tr>
        </table>
    </form>  

  <script>

    /**序列化表单,多个value用数组存放**/
    $.fn.serializeObject = function() {
        var o = {};
        var arr = this.serializeArray();
        $.each(arr,function(){
            if (o[this.name]) {  //返回json中有该属性
                if (!o[this.name].push) { //将已存在的属性值改成数组
                    o[this.name] = [ o[this.name] ];
                }
                o[this.name].push(this.value || ‘‘); //将值存放到数组中
            } else {  //返回json中没有有该属性
                o[this.name] = this.value || ‘‘;  //直接将属性和值放入返回json中
            }
        });
        return o;
    } 

    /**序列化表单,多个value用逗号隔开**/
    $.fn.serializeObject2 = function() {
        var o = {};
        var arr = this.serializeArray();
        $.each(arr,function(){
            if (o[this.name]) {  //返回json中有该属性
                o[this.name]=o[this.name]+‘,‘+(this.value || ‘‘);//序列化表单,多个value用逗号隔开
            } else {  //返回json中没有有该属性
                o[this.name] = this.value || ‘‘;  //直接将属性和值放入返回json中
            }
        });
        return o;
    }  

    /**初始化测试**/
    $(function() {
        $("#submitBtn").click(function() {
            var params = $("#myform").serializeObject(); //将表单序列化为JSON对象
            console.info(params);
            var params2 = $("#myform").serializeObject2(); //将表单序列化为JSON对象
            console.info(params2);  

         });
        var json={‘a‘:‘a我的#+~‘,‘b‘:‘b‘,‘c‘:‘c‘};
        var jsonStr=JSON.stringify(json);//json转字符串
        var json2=JSON.parse(jsonStr);//字符串转json
        console.info(jsonStr);
        console.info(‘encodeURI:\n‘+encodeURI(jsonStr));//转码非url的字符
        console.info(‘encodeURIComponent:\n‘+encodeURIComponent(jsonStr));//转码所有的特殊字符
        /*encodeURIComponent() 函数 与 encodeURI() 函数的区别之处,前者假定它的参数是 URI 的一部分(比如协议、主机名、路径或查询字符串)。因此 encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号。*/
        console.info(json2);
    }) 

  </script>
 </body>
</html>

原文地址:https://www.cnblogs.com/xmqa/p/9686160.html

时间: 2024-08-03 07:18:17

html表单序列化和json操作的相关文章

jquery将form表单序列化常json

var formData = {};$.each(form.serializeArray(),function(i, item){ formData[item.name] = item.value;}); $.ajax({ cache: true, type: "POST", url:ajaxCallUrl, data:$('#yourformid').serialize(),// 你的formid async: false, error: function(request) { al

jQuery实现form表单序列化转换为json对象功能示例

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jquery form序列化转换为json对象</title> <script src="//cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script> </script> </hea

待整理笔记(表单序列化操作、多态函数、对象的状态队列管理模式)

1.jquery的表单序列化操作 $('.form').serializeArray();通过serializeArray()方法得到表单form(class=“form”)的dom结点下所有含有name值的节点的value值的一个数组; 这个数组由多个对象构成,每个对象有name和value两个key值. 2.编程的多态性思想 利用函数的参数数组arguments,通过判断数组的长度来选择性执行某个功能: 例如: store: function(namespace, data, remove)

jquery将表单序列化json对象

$.fn.serializeObject = function () { var obj = {}; var count = 0; $.each(this.serializeArray(), function (i, o) { var n = o.name, v = o.value; count++; obj[n] = obj[n] === undefined ? v : $.isArray(obj[n]) ? obj[n].concat(v) : [obj[n], v]; }); //obj.

将任意一个jQuery对象进行表单序列化,免除了提交请求时大量拼写表单数据的烦恼,支持键值对&lt;name&amp;value&gt;格式和JSON格式。

http://zhengxinlong.iteye.com/blog/848712 将任意一个jQuery对象进行表单序列化,免除了提交请求时大量拼写表单数据的烦恼,支持键值对<name&value>格式和JSON格式. /// <reference name="jquery.js" description="1.3.2版本以上" /> /*!* 扩展jQuery表单序列化函数:{ Version: 1.2, Author: Eric

从list表单序列化后的值转成标准json

var json = {"name":["1111","222"],"sex":["男","女"],"age":["1111","2222"],"uNo":["111","2222"]};//从list表单序列化取出来的格式 var param = []; //定义数组

原生js实现form表单序列化

大家都知道在jquery中有相应的表单序列化的方法: 1.serialize()方法 格式:var data = $("form").serialize(); 功能:将表单内容序列化成一个字符串. 这样在ajax提交表单数据时,就不用一一列举出每一个参数.只需将data参数设置为 $("form").serialize() 即可. 2.serializeArray()方法 格式:var jsonData = $("form").serialize

form表单序列化为json格式数据

在web开发过程中,经常遇到将form序列化不能格式的字符串提交到后台,下面就介绍怎样将form表单序列化为json字符串. 首先,是扩展的jquery序列化插件,依赖jquery.经测试,这段代码可以放在$(funciton(){})中,也可以放在外面,都可以实现效果. $.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.

jquery表单序列化

http://gongwen.sinaapp.com/article-206.html jquery表单序列化,数据格式转成json格式;用的时候直接$('#FormId').serializeJson();便可. 代码如下: //jquery插件把表单序列化成json格式的数据start (function($){ $.fn.serializeJson=function(){ var serializeObj={}; var array=this.serializeArray(); var s