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:\n'+encodeURI(jsonStr));//轉碼非url的字符
        console.info('encodeURIComponent:\n'+encodeURIComponent(jsonStr));//轉碼所有的特殊字符
        /*encodeURIComponent() 函數 與 encodeURI() 函數的區別之處,前者假定它的參數是 URI 的一部分(比如協議、主機名、路徑或查詢字符串)。因此 encodeURIComponent() 函數將轉義用於分隔 URI 各個部分的標點符號。*/
        console.info(json2);
    }) 


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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM