1、ASP動態(tài)網(wǎng)頁設計與Ajax技術(shù),唐四薪 主編 ISBN：9787302269731 清華大學出版社 ,第十章 以Ajax方式訪問數(shù)據(jù)庫,以Ajax方式訪問數(shù)據(jù)庫,Web應用程序配合Ajax技術(shù)則能設計出更加友好的交互效果。通過Ajax方式訪問數(shù)據(jù)庫可以 在靜態(tài)頁面上載入數(shù)據(jù)庫中的數(shù)據(jù) 在無刷新的情況下查詢數(shù)據(jù)庫并更新顯示查詢結(jié)果 無刷新的情況下對數(shù)據(jù)庫中數(shù)據(jù)進行添加、刪除和修改 無刷新情況下對記錄集進行分頁,10.1 以Ajax方式顯示數(shù)據(jù),原理：在靜態(tài)頁中通過Ajax程序加載能顯示數(shù)據(jù)的動態(tài)頁 以原有格式顯示數(shù)據(jù) 所加載的動態(tài)頁含有HTML代碼 以自定義的格式顯示數(shù)據(jù) 加載的動態(tài)頁是JSO

2、N格式的字符串 加載的動態(tài)頁是用某個特殊字符分隔的字符串,獲取JSON字符串,$.getJSON(10-2.asp, function(data) $.each(data, function(i, item) var tr = + item.title + + item.content + + item.author + + item.email + + item.ip + ;$(#disp).append(tr);););,data是一個json數(shù)組，item是data中的某一項，是一個json對象,獲取用某個特殊字符分隔的字符串,$.get(10-3.asp, function(data)

3、 str=data.split(|);var tr = + str0+ + str1+ + str2 + + str3 + + str4 + ;$(#disp).append(tr););,將字符串切分后裝入各個HTML元素中,10.2 以Ajax方式查找數(shù)據(jù),查找數(shù)據(jù)先要發(fā)送一個查詢關(guān)鍵字（關(guān)鍵字通常是用戶在表單中輸入的）給服務器端程序，服務器根據(jù)該關(guān)鍵字查詢特定的數(shù)據(jù)表再將查詢結(jié)果發(fā)送給客戶端。在 Ajax中，可以參照9.3節(jié)中的方法發(fā)送查詢數(shù)據(jù)給服務器，然后再用回調(diào)函數(shù)接收從服務器返回的查詢結(jié)果。,10.2.2 查找數(shù)據(jù)的應用舉例,1. 制作級聯(lián)下拉框,2. 異步方式檢測用戶名是否可用,

4、$(#user).blur(function()user=$(#user).val(); $.get(10-9.asp, username:user,n:Math.random(), function (data) ,3. 制作帶自動提示功能的輸入框,當用戶在文本框中鍵入字符后（根據(jù)文本框中的值是否改變），就調(diào)用findroutes()函數(shù)獲取用戶輸入的內(nèi)容，然后將其異步提交到服務器查詢以它開頭的內(nèi)容,4. 制作Ajax無刷新登錄系統(tǒng),單擊登錄按鈕后，就先判斷是否輸入了用戶名和密碼，如果輸入了，就將用戶名和密碼發(fā)送給10-11.asp進行查詢,4. 制作Ajax無刷新登錄系統(tǒng)(2),10-12

5、.html在頁面加載時不能夠顯示登錄表單，而是根據(jù)用戶是否具有Session或是否輸入了正確的密碼來判斷是載入登錄成功的界面（loginok()）還是載入未登錄時的表單界面（loginno()）,5. 制作異步加載新聞的新聞網(wǎng)站首頁,6. 制作股票查詢系統(tǒng),通過異步請求的方式向某些網(wǎng)站發(fā)出請求，則它會返回相應的實時股票數(shù)據(jù),7. 制作動態(tài)載入內(nèi)容的彈出框,當鼠標經(jīng)過某條記錄時，才異步載入這條記錄帶有的圖片，這樣在打開網(wǎng)頁時，并沒有加載任何圖片，而是根據(jù)用戶的操作再加載對應的圖片,在電子商務網(wǎng)站中廣泛應用,10.3以Ajax方式添加記錄,將用戶在表單中輸入的數(shù)據(jù)作為$.post()方法的data

6、參數(shù)發(fā)送給服務器。 服務器端獲取到數(shù)據(jù)后，先將這些數(shù)據(jù)作為一條記錄插入到表中，然后再重新讀取更新后的表中的所有數(shù)據(jù)并輸出給客戶端。 客戶端頁面將服務器返回的數(shù)據(jù)載入到一個容器元素中，就可以顯示添加記錄后的數(shù)據(jù)表了,添加記錄的實現(xiàn),$.post(10-16.asp, title:escape(title), author:escape(author), email:escape(email), content:escape(content), act:add , function(data) $(#title).val();$(#author).val(); $(#email).val(); $

7、(#content).val(); $(#make).html(data); );,10.3.2 在服務器端和客戶端分別添加記錄,10-16.asp Response.write 1 10-15.asp function(data) if(data=1)$(#title).val();$(#author).val(); $(#email).val(); $(#content).val(); var newtr=+title+content+author+ +email+;$(#make).prepend(newtr); ,10.3.3 制作無刷新評論系統(tǒng),10.3.4 制作無刷新購物車程序,1

8、0.4 以Ajax方式修改記錄,修改記錄的過程實際上可分為兩步： 根據(jù)ID查找記錄并將要修改的記錄顯示在表單中 用戶在表單中修改信息并單擊“修改”按鈕后，就會調(diào)用函數(shù)modify1(id)，并將這條記錄的id傳遞給該函數(shù)，該函數(shù)首先獲取用戶在表單中輸入的內(nèi)容，將這些內(nèi)容連同記錄的id一起發(fā)送給服務器端頁面，服務器端頁面根據(jù)id找到記錄進行修改，修改完成后發(fā)送數(shù)據(jù)1給客戶端表示修改成功，客戶端收到1后，就在頁面上單獨更新記錄所在行的數(shù)據(jù)。,10.4.2 制作無刷新投票系統(tǒng),10.5 以Ajax方式刪除記錄,當用戶單擊“刪除”鏈接時，將調(diào)用函數(shù)del1(id)，并將記錄的id值傳遞給該函數(shù)，函數(shù)d

9、el1(id)將id用$.get方法發(fā)送給服務器端，服務器根據(jù)該id刪除對應的記錄后 function(data) if(data=1) kk=fff+id; s=document.getElementById(kk); $(s).remove(); ,10.5.2 同時刪除多條記錄的程序,$(:checkbox:checked).each(function()delseldelsel.length=this.value;); idstr=delsel.join(); $.get(10-19.asp,id:idstr,act:del,function(data) if(data=1) for

10、(i in delsel) kk=fff+delseli; s=document.getElementById(kk); $(s).remove(); );,10.6 以Ajax方式進行記錄集分頁,每個分頁鏈接不再指向一個URL地址，而是鏈接到一個分頁的函數(shù)，該函數(shù)中有一個參數(shù)用來傳遞頁碼給服務器 function getweblist(str) $.get(10-21.asp,act:list,pageNo:str,/發(fā)送頁碼給10-21.asp function(data) $(#list).html(data); ,10.6.2 可設置每頁顯示記錄數(shù)的分頁程序,10.6.3 同時具有刪除記錄功能的分頁程序,function del1(id,str)$.get(“10-25.asp”, id:id,act:“del”,pageNo:str,function(data) $(“#list”).html(data); );,原始的Ajax程序與jQuery Ajax程序的比較,XMLHttpRequest對象的方法,10.7.2 調(diào)試Ajax程序的方法,首先執(zhí)行后臺頁面，看后臺頁面運行是否正常 如果該動態(tài)頁面不需要獲取參數(shù)就可以運行，那么直接運行該文件即可； 如果動態(tài)頁面需要先獲取參數(shù)才能運行，那么可以自己在地址欄中輸入?yún)?shù) 前臺頁面的調(diào)試,習題,1. 在Aja