Ajax異步請求JSon數(shù)據(jù)(圖文詳解)
上一篇講了Ajax請求數(shù)據(jù)text類型,text和html都是處理比較簡答的數(shù)據(jù),而在編程過程中使用Ajax調用數(shù)據(jù)的時候,難免要進行邏輯的處理,接受的數(shù)據(jù)也變的復雜比如數(shù)組類型的數(shù)據(jù),這時候就需要使用JSON數(shù)據(jù)類型進行處理,今天就說說,JSON數(shù)據(jù)請求過程中的一些細節(jié):
腳本之家友情提醒本文所需工具和原料如下:
wamp或lamp環(huán)境、jquery.js、編輯器
具體方法/步驟請看下面:
1.創(chuàng)建基本的文件結構json_ajax.html和json_ajax.php,下載jquery.js,如圖:

2.如圖分別編寫json_ajax.html和json_ajax.php文件的編碼:


3.分別在w(l)amp環(huán)境下運行json_ajax.html和json_ajax.php,運行結果如圖:
這個運行的結果應該是正常的,理解上沒有困難的,繼續(xù)向下看,如果這里理解困惑,就沒必要在繼續(xù)閱讀的必要了。


4.經(jīng)過源碼和運行結果的分析,知道了在json_ajax.html中設置了按鈕的點擊事件,點擊按鈕,正常的運行結果如下圖;
若沒有正常的顯示,可參考我的《jQuery的Ajax之調試》

5.第4步結果分析:
console.log(data),直接將json_ajax.php返回的結果返回,就是json字符串;
console.log(eval('['+data+']')),這樣做的目的是將json_ajax.php返回的json字符串轉換成對象。
‘對象'在PHP里面是區(qū)別于過程的,但是在JS中,所有的數(shù)據(jù)都是對象,或許現(xiàn)在有點明白了,為什么要將json字符串轉換成對象了;在js中處理對象更方便,就像在PHP中處理數(shù)據(jù)的時候,首先想到的是數(shù)組(array)一樣。
6.細節(jié)總結:
1.php返回的必須是json,即是需要將數(shù)據(jù)用json_encode()處理;
2.ajax接受數(shù)據(jù)之后,需要eval()處理,里面'['+data+']'可以用'('+data+')';
3.console.log()可以使用alert()代替;
4.在此主要是過程思路,一旦接收到data數(shù)據(jù),就可以按需求進行邏輯處理了。
以上通過圖文并茂的方式給大家展示了Ajax異步請求JSon數(shù)據(jù),希望大家喜歡。
相關文章
ajax請求post和get的區(qū)別以及get post的選擇
這篇文章主要介紹了ajax請求post和get的區(qū)別以及get post的選擇,需要的朋友可以參考下2014-06-06
React+ajax+java實現(xiàn)上傳圖片并預覽功能
這篇文章主要介紹了React+ajax+java實現(xiàn)上傳圖片并預覽功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05
JavaScript操作表單_動力節(jié)點Java學院整理
用JavaScript操作表單和操作DOM是類似的,因為表單本身也是DOM樹。下面通過本文給大家介紹JavaScript操作表單的相關知識,感興趣的朋友一起看看吧2017-06-06
用ajax實現(xiàn)在單擊事件下加載一個DIV層的腳本
用ajax實現(xiàn)在單擊事件下加載一個DIV層的腳本...2007-11-11
HTTP狀態(tài)代碼及其定義解析 Ajax捕捉回調錯誤參考
當用戶試圖通過 HTTP 訪問一臺正在運行 Internet 信息服務 (IIS) 的服務器上的內(nèi)容時,IIS 返回一個表示該請求的狀態(tài)的數(shù)字代碼。狀態(tài)代碼可以指明具體請求是否已成功,還可以揭示請求失敗的確切原因2013-11-11
jQuery+Ajax實現(xiàn)表格數(shù)據(jù)不同列標題排序(為表格注入活力)
CSS也使得表格的布局越來越光彩耀人。但是,無論如何,都掩飾不了那些包裝下的死板,接下來為大家介紹下讓那些死板的數(shù)據(jù) 更具有可讀性、可用性2013-04-04

