iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 18
0
自我挑戰組

JavaScript基礎30天系列 第 18

AJAX 基礎介紹(3) DAY18

  • 分享至 

  • xImage
  •  

前一篇還記得
我們的格式,是利用傳統表單的格式嗎??
也就是
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
今天我們要來介紹
如何利用 AJAX 來傳遞 JSON 資料

AJAX JSON傳遞

讓我們先看看 CodePen

會發現我們的格式
必須改成
xhr.setRequestHeader('Content-type','application/json');
且我們必須先
把資料轉成 字串(String)格式
var data = JSON.stringify(account);
有點像我們要把資料存進 localStorage 前
必須將資料轉為字串
大家應該還沒有忘記
JSON.stringify 與 JSON.parse 吧/images/emoticon/emoticon02.gif
如果忘記了 可以參考前幾篇文章唷~~


AJAX 實務範例設計

CodePen
這裡會發現
我們把撈到的資料
再做一次比對
最後再呈現結果
是不是很簡單呢~~~

那 AJAX 的介紹
我們就告此一段落啦
有任何問題都可以私訊我
明天將會介紹 JS ES6
想學 JS ES6
但毫無頭緒的
可以關注唷~~/images/emoticon/emoticon07.gif


上一篇
AJAX 基礎介紹 (2) DAY17
下一篇
JS ES6 基礎介紹 DAY19
系列文
JavaScript基礎30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言