實(shí)驗(yàn)五Ajax應(yīng)用

1、實(shí)驗(yàn)五Ajax應(yīng)用【實(shí)驗(yàn)?zāi)康摹?、掌握jQuery對(duì)Ajax方法的支持；2、掌握jQuery處理Ajax應(yīng)用的常用方法；3、掌握l(shuí)oad、get、getJson、post等常用方法的應(yīng)用。 【實(shí)驗(yàn)準(zhǔn)備】1、復(fù)習(xí)教材相關(guān)內(nèi)容；2、預(yù)習(xí)本次實(shí)驗(yàn)；效果如圖5-1、5-2所示。（說(shuō)明：用.net 代碼和服務(wù)器端代碼，用JSP實(shí)現(xiàn)的提交【實(shí)驗(yàn)內(nèi)容】1、實(shí)現(xiàn)用戶(hù)注冊(cè)時(shí)的用戶(hù)名無(wú)刷新校驗(yàn)， 實(shí)現(xiàn)服務(wù)器端代碼的提交jQueryjQuery代碼和servlet中的代碼）用尸名:卵血稠I重復(fù)窖碼：25圖5-1圖5-2代碼如下:Register.javaP ackage com.jgj.servlet;import

2、 java.i o.I OExce pti on;import java.io .Prin tWriter;import javax.servlet.ServletExce ptio n;import javax.servlet.htt p.Htt pServlet;import javax.servlet.htt p.Htt pServletRequest; import javax.servlet.htt p.Htt pServletRes pon se;Supp ressWar nin gs(serial)p ublic class Register exte nds Htt pServ

3、let p ublic void doGet(Htt pServletRequest request, Htt pServletRes ponse response) throws ServletExce pti on, I OExce pti on request.setCharacterE ncodi ng(GB2312);String un ame = request.get Parameter(” un ame);PrintWriter out = response.getWriter();if (uname.equals(jgj) / 僅起到測(cè)試作用 out.println(0);

4、else out.println(1);out.flush();out.close();public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException this.doGet(request, response);register.jsp 用戶(hù)注冊(cè) .focus background-color: #FF66FF;.importent color: #FF0000; font-size: larger;.input width: 14

5、0px; height: 20px; $(function() $(.input).focus(function() $(this).addClass(focus);).blur(function() $(this).removeClass(focus); if ($(this).is(#uname) if ($(this).val() = ) $(this).nextAll(label).text( 用戶(hù)名不能為空！ ); else $.post(register, uname : $(this).val() , function(msg) if (msg = 1) $(label:firs

6、t).text( 用戶(hù)名可用！ else );$(label:first).text( 用戶(hù)名已存在！ ););if ($(this).is(#upass) if ($(this).val() = ) $(this).nextAll(label).text( 密碼不能為空！if ($(this).is(#rupass) if ($(this).val() = ) $(this).nextAll(label).text( 重復(fù)不能為空！););););$(#reset).click(function() $(.input).val();$(label).text();); 用戶(hù)名： * 密碼：

7、* 重復(fù)密碼： * 2、實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)的下拉列表框，其效果如圖 5-3所示。（說(shuō)明：用.net實(shí) 現(xiàn)服務(wù)器端代碼的提交jQuery代碼和服務(wù)器端代碼，用JSP實(shí)現(xiàn)的提交jQuery 代碼和servlet中的代碼）淮陰區(qū)V街道區(qū)縣：清浦區(qū)V街道：請(qǐng)選擇.Vh青選擇請(qǐng)選擇區(qū)縣圖5-3代碼如下：Street.java p ackage com.jgj.servlet;import java.i o.I OExce pti on;import java.io .Prin tWriter;import java.util.Hashtable;import javax.servlet.ServletExce

8、 pti on;import javax.servlet.htt p.Htt pServlet;import javax.servlet.htt p.Htt pServletRequest;import javax.servlet.htt p.Htt pServletRes pon se;Supp ressWar nin gs(serial)p ublic class Street exte nds Htt pServlet p ublic void doGet(Htt pServletRequest request, Htt pServletRes ponse response) throw

9、s ServletExce pti on, I OExce pti on /模擬數(shù)據(jù)庫(kù)Hashtable ht = new Hashtable(); ht. pu t(1, new Stri ng ht. put(2, new Stri ng ht. pu t(3, new Stri ng ht. put(4, new Stri ng /設(shè)置編碼方式res pon se.setCo ntentTyp e(text/JSON;charset=utf-8); respon se.setCharacterE ncodi ng(utf-8);清河區(qū) 清浦區(qū) 淮陰區(qū) 開(kāi)發(fā)區(qū)1,清河區(qū)1,清浦區(qū)1,淮陰區(qū)

10、1,開(kāi)發(fā)區(qū)2,清河區(qū)2,清浦區(qū)2,淮陰區(qū)2,開(kāi)發(fā)區(qū)3,清河區(qū)3,清浦區(qū)3,淮陰區(qū)3,開(kāi)發(fā)區(qū)4 )；4 )；4 );4 );response.setHeader(Cache-Control, no-cache);/ out 對(duì)象用于寫(xiě) JSON 數(shù)據(jù)PrintWriter out = response.getWriter();/ 接收頁(yè)面?zhèn)鬟f過(guò)來(lái)的區(qū)縣編號(hào)String districtid = request.getParameter(qxid);System.out.println(11); / 根據(jù)區(qū)縣編號(hào)查詢(xún)街道信息String result = ht.get(districtid);/

11、定義 Stringbuffer 類(lèi)型的對(duì)象，創(chuàng)建 JSON 字符串 StringBuffer sb = new StringBuffer();sb.append();/ 每一個(gè) street 項(xiàng)for (int i = 0; i result.length; i+) sb.append();sb.append(streetid: + (i + 1) + ,); sb.append(streetname: + resulti + ); sb.append();if (i result.length - 1) sb.append(,);sb.append();/ 將 JSON 數(shù)據(jù)寫(xiě)入到 out

12、對(duì)象中 out.print(sb.toString();out.flush(); out.close();public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException this.doGet(request, response); select.jsp $(function() $(select:first).change(function() $.getJSON(street, qxid: $(this).val(), funct

13、ion(data) $(#streets).empty();$(#streets).append( 請(qǐng)選擇 .);$.each(data, function(i, item) var streetid = item.streetid;var streetname = item.streetname;var tempoption = document.createElement(option); tempoption.value = streetid; tempoption.innerHTML = streetname;$(#streets).append(tempoption););););)

14、; 區(qū)縣： 清河區(qū) 清浦區(qū) 淮陰區(qū) 開(kāi)發(fā)區(qū) 街道： 請(qǐng)選擇.servlet中的代碼）3、在下拉列表框中選擇區(qū)縣名稱(chēng)，查詢(xún)結(jié)果在表格中顯示出來(lái)。整個(gè)過(guò)程中頁(yè) 面無(wú)刷新。效果如圖5-4所示。（說(shuō)明：用.net實(shí)現(xiàn)服務(wù)器端代碼的提交jQuery 代碼和服務(wù)器端代碼，用JSP實(shí)現(xiàn)的提交jQuery代碼和選擇房屋所在區(qū)縣清河區(qū)V開(kāi)始查詢(xún)選擇房屋所在區(qū)縣:馬屋名稱(chēng)所在區(qū)縣房型層面和價(jià)格淮海第一城活河區(qū)2室2廳39080淮?；▓@清河區(qū)2室1廳6705開(kāi)始查詢(xún)清河區(qū)V圖5-4代碼如下“Data.js PP ackage com.jgj.servlet;import java.i o.I OExce pti o

15、n;import java.io .Prin tWriter;import java.util.Hashtable;import javax.servlet.ServletExce ptio n;import javax.servlet.htt p.Htt pServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;SuppressWarnings(serial) public class Data extends HttpServlet public v

16、oid doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException / 模擬數(shù)據(jù)庫(kù)清河區(qū)房屋 , 清河區(qū) , 2 清浦區(qū)房屋 , 清浦區(qū) , 2 淮陰區(qū)房屋 , 淮陰區(qū) , 2 開(kāi)發(fā)區(qū)房屋 , 開(kāi)發(fā)區(qū) , 2室 2 廳, 2, 80, 60 ); 室 2 廳, 2, 80, 60 ); 室 2 廳, 2, 80, 60 ); 室 2 廳, 2, 80, 60 );Hashtable ht = new Hashtable(); ht.put(1, new

17、String ht.put(2, new String ht.put(3, new String ht.put(4, new String / 設(shè)置編碼方式 response.setContentType(text/JSON;charset=utf-8); response.setCharacterEncoding(utf-8); response.setHeader(Cache-Control, no-cache);/ out 對(duì)象用于寫(xiě) JSON 數(shù)據(jù) PrintWriter out = response.getWriter();/ 接收頁(yè)面?zhèn)鬟f過(guò)來(lái)的區(qū)縣編號(hào) String distric

18、tid = request.getParameter(qxid);/ 根據(jù)區(qū)縣編號(hào)查詢(xún)街道信息 String result = ht.get(districtid);/ 定義 Stringbuffer 類(lèi)型的對(duì)象，創(chuàng)建 HTML ，以一條信息測(cè)試使用 StringBuffer sb = new StringBuffer();sb.append( 房 屋 名 稱(chēng) 所 在 區(qū) 縣 房 型 樓層 面積 價(jià)格 );sb.append( + result0 + );sb.append( + result1 + );sb.append( + result2 + );sb.append( + result3 + );sb.append( + result4 + );sb.append( + result5 + );sb.append();