傳智播客jQuery_ajax課件

1、高級軟件人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專家! !北京傳智播客教育 北京傳智播客教育 JQUERY_AJAXJQUERY_AJAX 講師：馮威講師：馮威高級軟件人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專家! !北京傳智播客教育 jQuery 中的 AjaxlJQuery 對 Ajax 操作進(jìn)行了封裝, 在 jQuery 中最底層的方法時(shí) $.ajax(), 第二層是 load(), $.get() 和和 $.post(), 第三層是 $.getScript() 和 $.getJSON()高級軟件人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專家! !北京傳智播客教育 load() 方法lload()方法

2、是 jQuery 中最為簡單和常用的 Ajax 方法, 能載入遠(yuǎn)程能載入遠(yuǎn)程的的 HTML 代碼并插入到代碼并插入到 DOM 中中. 它的結(jié)構(gòu)是: load(url, data,callback)l程序員只需要使用 jQuery 選擇器為 HTML 片段指定目標(biāo)位置, 然后將要加載的文件的 url 做為參數(shù)傳遞給 load() 方法即可高級軟件人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專家! !北京傳智播客教育 load() 方法 - 細(xì)節(jié)l傳遞方式: load() 方法的傳遞參數(shù)根據(jù)參數(shù) data 來自動自定. 如如果沒有參數(shù)傳遞果沒有參數(shù)傳遞, 采用采用 GET 方式傳遞方式傳遞, 否則采用否則

3、采用 POST 方式方式l對于必須在加載完才能繼續(xù)的操作, load() 方法提供了回調(diào)函數(shù), 該函數(shù)有三個(gè)參數(shù): 代表請求返回內(nèi)容的代表請求返回內(nèi)容的 data; 代表請求狀態(tài)的代表請求狀態(tài)的 textStatus 對象對象(其值可能為: succuss, error, notmodify, timeout 4 種)和和 XMLHttpRequest 對象對象l方法的返回值是方法的返回值是 jQueryl如果只需要加載目標(biāo) HTML 頁面內(nèi)的某些元素, 則可以通過 load() 方法的 URL 參數(shù)來達(dá)到目的. 通過 URL 參數(shù)指定選擇符, 就可以方便的從加載過來的 HTML 文檔中選出所

4、需要的內(nèi)容. load() 方法的 URL 參數(shù)的語法結(jié)構(gòu)為 “url selector”(注意: url 和 選擇器之間有一個(gè)空格)高級軟件人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專家! !北京傳智播客教育 $.get() (或$.post() 方法l$.get() 方法使用 GET 方式來進(jìn)行異步請求. 它的結(jié)構(gòu)是: $.get(url, data, callback, type);l$.get() 方法的回調(diào)函數(shù)只有兩個(gè)參數(shù): data 代表返回的內(nèi)容, 可以是 XML 文檔, JSON 文件, HTML 片段等; textstatus 代表請求狀態(tài), 其值可能為: succuss, err

5、or, notmodify, timeout 4 種.l方法的返回值:XMLHttpRequest對象l$.get() 和 $.post() 方法是 jQuery 中的全局函數(shù), 而 find() 等方法都是對 jQuery 對象進(jìn)行操作的方法高級軟件人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專家! !北京傳智播客教育 序列化元素ljQuery 為準(zhǔn)備 “發(fā)送到服務(wù)器的 key/value 數(shù)據(jù)” 提供了一個(gè)簡化的方法: serialize(). 該方法作用于一個(gè) jQuery 對象, 能將 DOM 元素內(nèi)容序列化為字符串, 用于 Ajax 請求.l使用 serialize() 方法可以自動完成對參

6、數(shù)的 url 編碼l因?yàn)樵摲椒ㄗ饔糜?jQuery 對象, 所以不光只要表單能使用, 其它選擇器選取的元素也能使用它. var xmlHpptReq=$.get(base01.jsp,username:aa,psw:8888);var xmlHpptReq=$.get(base01.jsp,$(#form1).serialize();高級軟件人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專家! !北京傳智播客教育 JQuery JQuery 加載并解析加載并解析 XMLXMLlJQuery 可以通過 $.get() 或 $.post() 方法來加載 xml.lJQuery 解析 XML 與解析 DOM 一樣, 可以使用 find(), children() 等函數(shù)來解析和用 each() 方法來進(jìn)行遍歷高級軟件人才實(shí)作培訓(xùn)專家高級軟件人才實(shí)作培訓(xùn)專家! !北京傳智播客教育 練習(xí)練習(xí)8: 8: 使