• Jquery表单序列化和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:
    '+encodeURI(jsonStr));//转码非url的字符
            console.info('encodeURIComponent:
    '+encodeURIComponent(jsonStr));//转码所有的特殊字符
            /*encodeURIComponent() 函数 与 encodeURI() 函数的区别之处,前者假定它的参数是 URI 的一部分(比如协议、主机名、路径或查询字符串)。因此 encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号。*/
            console.info(json2);
        }) 
    
    
       
        
      </script>
     </body>
    </html>
  • 相关阅读:
    ABAP常用快捷键
    UDP协议的几个特性
    HTTP协议的工作原理
    SAP Memory与ABAP Memory
    Solution Manager Key
    内表的CLEAR、REFRESH、FREE
    ABAP变量的几种可见范围
    Oracle的表空间、数据文件、用户
    SAP ECC6.0 IDES在Win7 X64上的安装
    SAP激活中文语言包
  • 原文地址:https://www.cnblogs.com/xmqa/p/9686160.html
Copyright © 2020-2023  润新知