iT邦幫忙

2019 iT 邦幫忙鐵人賽

0
自我挑戰組

程式設計師大冒險系列 第 62

[62/150]初學JSON和AJAX心得(二)JSON實際應用

  • 分享至 

  • xImage
  •  

將個人UVa解題資料,整理成JSON格式。

【大綱】

  • 時間分配
  • JSON實際應用
    • 程式碼
    • 開發者介面
  • 檢討與修正
  • 總結

【時間分配】

項目 時間
JSON 0 hr 55 min
鐵人發文 0 hr 20 min
HTML 0 hr 45 min
AJAX 0 hr 41 min

【JSON實際應用】

參考:JSON 基本教學 By 彭彭
將之前寫的UVa做整理
照範例做成功的將資料叫出來,只是資料格式需要思考如何擺放。
還要學習創建json檔,以及檢視json檔的軟體。
目前是用txt檔暫時存放,要用在貼到網頁上。

【程式碼】

這一段是放在 BODY裡面,透過範例解說,有點理解序列化是做什麼。

<script >
	<!--JSON資料-->
     var UVa ={"que":[{"name":"Vito's family",
	 "ifsolve":"true",
	 "number":"(CPE10406,?UVA10041)"},
	{"name":"Hashmat the brave warrior",
	 "ifsolve":"true",
	 "number":"(CPE10407,?UVA10055)"}]};
	 
	 <!--序列化-->
	var jsonStr=JSON.stringify(UVa);
	console.log(jsonStr);
	
	<!--反序列化-->
	var planObj=JSON.parse(jsonStr);
	console.log(planObj);
	alert(planObj.que[1].name);
    </script>

【開發者介面】

https://ithelp.ithome.com.tw/upload/images/20181201/20091910vnsM4pF249.jpg

【檢討與修正】

繼續加強JSON學習,了解檔案建立。
建立網頁版UVa解題查詢,代替Excel檔。

【總結】

實際做一遍,有些觀念更清楚。
像是序列化與反序列化,從物件轉成純文字,最後再進行反轉。
感謝撥冗閱讀。


上一篇
[61/150]初學JSON和AJAX心得(ㄧ)
下一篇
[63/150]初學JSON和AJAX心得(三)透過解惑去學習
系列文
程式設計師大冒險115
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言