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

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

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

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

4、(z/0，z); else out. printin(1);out flush ();out close ();)public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException this doGet (request, response);register jsp html xmlns二http:/wwww3 org/1999/xhtml 用戶注冊 .focus background-color: #FF66FF; importen

5、t color: ttFFOOOO; font-size: larger; input width: 140px; height: 20px; script type二text/javascript $ (function () $ (z，. input，?). focus (function () $ (this). addClass (z，focus/z);). blur (function () $ (t his). removeClass (，focus，/) ; if($ (this). is (，z#unamez/) if ($ (this). val () = ”) $ (thi

6、s). next All (label). text (用戶名不能為空!“)； else $ post (:register, uname : $(this). val () , function(msg) if (msg 二二 1) $ (label:first). text (用戶名可用！ else $ (label: first) text ( 用戶名己存在！，) ;if ($(this). is(#upass) if ($ (this). val () = ”) S (this). nextAll (，/label，/). text (?，密碼不能為 ) 空！.if ($(this).

7、 is(，#rupass，/) if ($ (this). val () = ”) $ (this). nextAll (label). text (“ 重復(fù)不能為 “) 空??；)；$ (/，#reset，/). click (function 0 $ (. input). val ();$ C label), text CO；)；)form method二post td width二100 align二right用戶名： td width二300*/labeltd align二right密碼： */label 重復(fù)密碼： */span/label 2、實(shí)現(xiàn)二級聯(lián)動的下拉列表框，其效果如圖5-

8、3所示。（說明：用.net實(shí) 現(xiàn) 服務(wù)器端代碼的提交JQuery代碼和服務(wù)器端代碼，用JSP實(shí)現(xiàn)的提交jQuery代碼 和servlet中的代碼）區(qū) 縣淮陰區(qū)V街道1區(qū)縣：h青選擇北京東路 蘭遼東路清浦區(qū)V街道:請選擇請選擇圖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 servletServletExce pti on;import java

9、x .servlethtt p. Htt pServlet;import javax.servlethtt p. Htt pServletRequest;import javax .servlethtt p. Htt pServletRes pon se;Supp ressWar nin gs(serial)p ublic class Street exte nds Htt pServlet Htt pServletRes ponse response) throwsp ublic void doGet(Htt pServletRequest request,ServletExce pti o

10、n, I OExce pti on 模擬數(shù)據(jù)庫HashtableStri ng, Stri ng ht = new HashtableStri ng, String （） ; ht. pune 扉說倉口 潸河 向七（管刑 IKew靖河區(qū) 4 ng r ht. punew S浦i浦盤1；乍青浦 （ST” 請涌醫(yī)乍青浦區(qū) 人淮陰區(qū)i, 淮陰區(qū)2, 淮陰區(qū)3, 淮陰區(qū)4/設(shè)置編碼方式開發(fā)區(qū)1,開發(fā)區(qū)2,開發(fā)區(qū)3,開發(fā)區(qū):res pon se. setCo ntentTyp e Ctext/JSON; charsetPtf-8）； respon、）； se.setCharacterE ncodi ng

11、（utf-8）；4 ）； response setHeader (，zCache-Control，z, no-cache);/ out對象用于寫JSON數(shù)據(jù)PrintWriter out = responsegetWriter();/接收頁面?zhèn)鬟f過來的區(qū)縣編號String districtid 二 request. getParameter (qxidO ; System, out. print In (11); /根據(jù)區(qū)縣編號查詢街道信息StringL result = htget(districtid);/ 定義 Stringbuffer 類型的對象，創(chuàng)建 JSON 字符串 StringB

12、uffer sb = new StringBuffer ();sb. append (z/ );/每一個(gè)street項(xiàng)for (int i = 0; i result, length; i+) sb. append()；sb. append(Astreetid: + (i + 1) +;sb. append (，z/streetname/，: ，/z + result i +; sb. append ();if (i result, length - 1) sb. appendC “)；sb. append (z/ ”)；/ 將 JSON 數(shù)據(jù)寫入到 out 對象中 out. print (s

13、b. toStringO);out f lush();out close ();public void doPost(HttpServletRequest request， HttpServletResponse response) throws ServletException, IOException this doGet(request, response);select jsp% page language二java import=，zjavapageEncoding二gbk% $ (function() $ (/zselect:fitst) change (function() $.

14、 getJSON(，/street， qxid: $ (this). val (), function(data) $ C #streets) empty ();$ (，#streets，). append (， 請選擇./option)；$ each (data, function (i, item) var streetid = item. streetid;var streetname = itemstreetname;var tempoption 二document createElement(option);tempoption. value = streetid; tempopti

15、on. innerHTML = streetname;$ ( #streets) append (tempoption););););); 區(qū)縣： select name二districtid id二districtid 清河區(qū) 清浦區(qū) /option 淮陰區(qū) 開發(fā)區(qū) /option 街道： 請選擇 3、在下拉列表框中選擇區(qū)縣名稱，查詢結(jié)果在表格中顯示出來。整個(gè)過程中頁面無刷新。效果如圖5-4所示。（說明：用.net實(shí)現(xiàn)服務(wù)器端代碼的提交JQuery代碼 和服務(wù)器端代碼，用JSP實(shí)現(xiàn)的提交jQuery代碼和servlet中的代碼）選擇房屋所在區(qū)縣清河區(qū)v |開始查詢|選擇房屋所在區(qū)縣:清河區(qū)V

16、 開始查詢馬屋名稱所在區(qū)縣房型層面和價(jià)格淮海第一城活河區(qū)2室2廳39080淮海花園清河區(qū)2室1廳6705圖5-4代碼如下“Data, js PP ackage com. jgj. servlet;import java i o I OExce pti on;import java io Prin tWriter;import java .util. Hashtable;import javax.servletServletExce ptio n;import javax.servlethtt p. Htt pServlet;import javax. servlet, http. HttpSe

17、rvletRequest;import javax.servlet, http. HttpServletResponse;SuppressWarnings (，zserial，/) pub lie class Data extends Htt pServlet public void doGet(HttpServletRequest request, HttpServletResponse response) throwsServletException,/模擬數(shù)據(jù)庫HashtableString,String ht 二 newHashtable0 ； ht.new String ht.put

18、(2, new String ht. put (3, new String ht. put(4, new String /清河區(qū)房屋 清浦區(qū)房屋 淮陰區(qū)房屋 開發(fā)區(qū)房屋，“清河區(qū) ，清浦區(qū) ，淮陰區(qū) ，開發(fā)區(qū)2 室 2 廳：，260 );室 2 廳, ，280， 60”，22，80，)；室 2 60 );80,2,廳,室2設(shè)置編碼方式IOException response setContentType(氣ext/JSON;charset=utf-8)；response setCharacterEncoding(utf-S); response setHeader (Cache-Control

19、, nocache);/ out 對象用于寫 JSON 數(shù)據(jù) PrintWriter out = response. getWriterO ;/ 接收頁而傳遞過來的區(qū)縣編號 String districtid = request. getParameter(gxid);/根據(jù)區(qū)縣編號查詢街道信息StringT result = ht. get (districtid);/定義Stringbuffer類型的對象，創(chuàng)建HTML ,以一條信息測試使用StringBuffer sb = newStringBuffer();sb sb. append /table，/);.append (z， 房屋名稱

20、所在區(qū)縣 房型 樓層 面積 價(jià)格 z，);sb. append (，/，z + result 0 + /td);sb. append (/，/sb. append (z/，zsb. append (/，/sb. append (，/，/sb. append (z/，zresult 1resuIt2result3resuIt4resuIt 5Y/td);Y/td);/z，z);/將JSON數(shù)據(jù)寫入到out對象中out print (sb toString ();out. flush ();out close ();public void doPost(HttpServletRequest request, HttpSe