<menu id="ycqsw"></menu><nav id="ycqsw"><code id="ycqsw"></code></nav>
<dd id="ycqsw"><menu id="ycqsw"></menu></dd>
  • <nav id="ycqsw"></nav>
    <menu id="ycqsw"><strong id="ycqsw"></strong></menu>
    <xmp id="ycqsw"><nav id="ycqsw"></nav>
  • js讀取本地json文件數據(php和mysql網站模板)


    JSON語法

    JSON和XML類型,都是一種結構化的數據表示方式。所以,JSON并不是JavaScript獨有的數據格式,其他很多語言都可以對JSON進行解析和序列化。

    JSON的語法可以表示三種類型的值:

    ①簡單值:可以在JSON中表示字符串、數值、布爾值和null。但JSON不支持JavaScript中的特殊值undefined。

    ②對象:顧名思義。

    ③數組:顧名思義。

    1.簡單值

    “Lee”這兩個量就是JSON的表示方法,一個是JSON數值,一個是JSON字符串。布爾值和null也是有效的形式。但實際運用中要結合對象或數組。

    2.對象

    JavaScript對象字面量表示法:

    var box = { 
     name : 'Lee', 
     age : 100 
    }; 
    

    而JSON中的對象表示法需要加上雙引號,并且不存在賦值運算和分號:

    { 
     "name" : "Lee", //使用雙引號,否則轉換會出錯 
     "age" : 100 
    } 
    

    3.數組

    JavaScript數組字面量表示法:

    var box = [100, ‘Lee’, true];

    而JSON中的數組表示法同樣沒有變量賦值和分號:

    [100, “Lee”, true]

    一般比較常用的一種復雜形式是數組結合對象的形式:

    [ 
     { 
     "title" : "a", 
     "num" : 1 
     }, 
     { 
     "title" : "b", 
     "num" : 2 
     }, 
     { 
     "title" : "c", 
     "num" : 3 
     } 
     ]
    

    PS:一般情況下,我們可以把JSON結構數據保存到一個文本文件里,然后通過XMLHttpRequest對象去加載它,得到這串結構數據字符串(XMLHttpRequest對象將在Aajx章節中詳細探討)。所以,我們可以模擬這種過程。

    模擬加載JSON文本文件的數據,并且賦值給變量。

    	var box = '[{"name" : "a","age" : 1},{"name" : "b","age" : 2}]'; 
    

    PS;上面這短代碼模擬了var box = load(‘demo.json’);賦值過程。因為通過load加載的文本文件,不管內容是什么,都必須是字符串。所以兩邊要加上雙引號。

    其實JSON就是比普通數組多了兩邊的雙引號,普通數組如下:

    	var box = [{name : 'a', age : 1},{name : 'b', age : 2}]; 
    

    4.解析和序列化

    如果是載入的JSON文件,我們需要對其進行使用,那么就必須對JSON字符串解析成原生的JavaScript值。當然,如果是原生的JavaScript對象或數組,也可以轉換成JSON字符串。

    對于講JSON字符串解析為JavaScript原生值,早期采用的是eval()函數。但這種方法既不安全,可能會執行一些惡意代碼。

    varbox = '[{"name" : "a","age" : 1},{"name" : "b","age" : 2}]'; 
    alert(box); //JSON字符串 
    varjson = eval(box); //使用eval()函數解析 
    alert(json); //得到JavaScript原生值 
    

    ECMAScript5對解析JSON的行為進行規范,定義了全局對象JSON。支持這個對象的瀏覽器有IE8+、Firefox3.5+、Safari4+、Chrome和Opera10.5+。不支持的瀏覽器也可以通過一個開源庫json.js來模擬執行。JSON對象提供了兩個方法,一個是將原生JavaScript值轉換為JSON字符串:stringify();另一個是將JSON字符串轉換為JavaScript原生值:parse()。

    var box = '[{"name" : "a","age" : 1},{"name" : "b","age" : 2}]'; //特別注意,鍵要用雙引號 
    alert(box); 
    var json = JSON.parse(box); //不是雙引號,會報錯 
    alert(json); 
    var box = [{name : 'a', age : 1},{name : 'b',age : 2}]; //JavaScript原生值 
    var json = JSON.stringify(box); //轉換成JSON字符串 
    alert(json); //自動雙引號 
    

    在序列化JSON的過程中,stringify()方法還提供了第二個參數。第一個參數可以是一個數組,也可以是一個函數,用于過濾結果。第二個參數則表示是否在JSON字符串中保留縮進。

    varbox = [{name : 'a', age : 1, height : 177},{name : 'b', age : 2, height : 188}]; 
    var json = JSON.stringify(box, ['name', 'age'],4); 
    alert(json); 
    

    PS:如果不需要保留縮進,則不填即可;如果不需要過濾結果,但又要保留縮進,則講過濾結果的參數設置為null。如果采用函數,可以進行復雜的過濾。

    varbox = [{name : 'a', age : 1, height : 177},{name : 'b', age : 2, height : 188}]; 
    var json = JSON.stringify(box, function (key, value) { 
     switch (key) { 
     case 'name' : 
     return'Mr.' + value; 
     case 'age' : 
     returnvalue + '歲'; 
     default: 
     returnvalue; 
     } 
    }, 4); 
    alert(json); 
    

    PS:保留縮進除了是普通的數字,也可以是字符。

    還有一種方法可以自定義過濾一些數據,使用toJSON()方法,可以將某一組對象里指定返回某個值。

    varbox = [{name : 'a', age : 1, height : 177, toJSON : function () { 
     return this.name; 
    }},{name : 'b',age : 2, height : 188, toJSON : function () { 
     return this.name; 
    }}]; 
    var json = JSON.stringify(box); 
    alert(json); 
    

    PS:由此可見序列化也有執行順序,首先先執行toJSON()方法;如果應用了第二個過濾參數,則執行這個方法;然后執行序列化過程,比如將鍵值對組成合法的JSON字符串,比如加上雙引號。如果提供了縮進,再執行縮進操作。

    解析JSON字符串方法parse()也可以接受第二個參數,這樣可以在還原出JavaScript值的時候替換成自己想要的值。

    varbox = '[{"name" : "a","age" : 1},{"name" : "b","age" : 2}]'; 
    var json = JSON.parse(box, function (key, value) { 
     if (key == 'name') { 
     return'Mr.' + value; 
     } else { 
     returnvalue; 
     } 
    }); 
    alert(json[0].name);
    

    總結

    通過本篇文章,你可以學習到以下知識點:

    1.JSON簡單值;

    2.對象;

    3.數組;

    版權聲明:本文內容由互聯網用戶自發貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容, 請發送郵件至 舉報,一經查實,本站將立刻刪除。

    發表評論

    登錄后才能評論
    国产精品区一区二区免费