JSON概述，json線上解析
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>JSON概述</title><script type="text/javascript"> /* /*JSON格式的本質 就是 字串javascript對象的格式JS數組格式：var arr = ['a','b','c'];JSON格式1：var arr = "['a','b','c']";----------------------------------JS對象格式：var person = {'name':'張三','age':'15','sex':'男'};JSON格式2：var person = "{'name':'張三','age':'15','sex':'男'}";-------------------------------------JSON的取值步驟：1、把JSON字串用eval函數變成 JavaScript對應的對象2、應用取值eval(字串) 可把字串變成JavaScript代碼解析執行 傳回值。 把JavaScript代碼解析返回 eval("("+json1+")") 在字串前加"(" 在字串後加")"為了照顧瀏覽器安全色性，能夠讓JSON資料順利轉成JavaScript對象，必須加括弧 var json1 = "['a','b','c']";//json var arr = eval("("+json1+")"); alert(arr.length); for(var x in arr){ alert(arr[x]);} var json2 = "{'name':'張三','age':'15','sex':'男'}"; var arr2 = eval("("+json2+")"); alert(arr2.length); for(var x in arr2){ alert(x+"="+arr2[x]);} */ function run1() { var goodsJ = "[{'name':'電視機','price':'200','number':'10'},{'name':'手機','price':'4200','number':'100'},{'name':'電冰箱','price':'2000','number':'8'}]"; var goods = eval("("+goodsJ+")"); var tableNode = document.getElementById("ii"); alert(tableNode.innerHTML); for(var x=0;x<goods.length;x++) { tableNode.innerHTML+="<tr><td>"+goods[i]["name"]+"</td><td>"+goods[i]["price"]+"</td><td>"+goods[i]["number"]+"</td></tr>"; } } </script></head><body><table border="1" width="100%" id="ii"><tr><th>商品名稱</th><th>商品價格</th><th>商品數量</th></tr></table><input type="button" value="點擊擷取詳細資料" onclick="run1()"/></body></html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>03JSON案例.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript">/* JSON的資料是從伺服器拿來的。 */ function run(){ //1、JSON資料是從伺服器拿到的 var goodsJ = "[{'name':'電視機','price':'200','number':'10'},{'name':'手機','price':'4200','number':'100'},{'name':'電冰箱','price':'2000','number':'8'}]"; //2、把JSON資料變成JavaScript對象 var goods = eval("("+goodsJ+")"); //3、（準備）把table對象拿到 var tableNode=document.getElementById("t1");// alert(tableNode.innerHTML); //4、把擷取到的資料進行遍曆，並且動態添加進table for(var i=0;i<goods.length;i++){ tableNode.innerHTML+="<tr><td>"+goods[i]["name"]+"</td><td>"+goods[i]["price"]+"</td><td>"+goods[i]["number"]+"</td></tr>"; } } </script> </head> <body> <table border="1" width="100%" id="t1"> <tr> <th>商品名稱</th> <th>商品價格</th> <th>庫存</th> </tr> </table> <br/> <input type="button" value="點我載入資料" onclick="run()"/> </body></html>
著作權聲明：本文為博主原創文章，未經博主允許不得轉載。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
