今天早上老佟將昨天的練習進行了講解。今天的主要內容是對AJAX的匯總練習,做了兩個練習都是比較常使用的應用。
一、 下拉框的級聯,比如,選擇下拉框一中的內容(城市名稱),在下拉框二中顯示在這個城市中的部門。在下拉框二中選擇部門名稱,在下拉框三中顯示部門的人員。在下拉框中選擇人員名稱,在表格中顯示人員具體信息。這就是級聯,數據存儲在數據庫中。使用AJAX技術只更新當前頁面部分內容,無須刷新整個頁面。
二、 用戶注冊功能,提示用戶名是否合法等。同樣也是使用AJAX技術。
這兩個練習大家都比較常見,WEB已經這么流行了!Ok,接下來讓我們看看具體流程。我把這兩個圖畫一下。(只為AJAX與Struts1的配合練習)
練習一:下拉框的級聯
以上沒有使用service層,那樣做會使程序更優雅。但對于這個小練習沒有必要,甚至編寫多個DAO也沒必要,老佟只編寫了一個DAO。在這里我們麻煩一下自己吧!
這里與頁面的交互數據是JSON,JSON用在表單上十分方便。
列出一部分程序的代碼,在頁面加載時。需要獲取城市列表,并將城市添加到下拉列表框中(對應的項目value是城市的Id)。:
var url="${pageContext.request.contextPath}/cascading.do?method=getAllCities"; var args = {"time":new Date()}; $("#city > option:not(:first)").remove(); // 嚴重注意JSON數據的格式,出一點差錯都不可以,比如少了一個“:”。 $.getJSON(url, args, function(data){ if(data != null){ //將所有的城市顯示到下拉列表框中 for(var i=0; i < data.cities.length;i++){ var newOption = $("<option value='"+data.cities[i].id+"'>"+data.cities[i].name+"</option>"); newOption.appendTo($("#city")); } } }); |
getJSON請求的處理的DispatchAction的方法:
public ActionForward getAllCities(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception { //獲取所有城市 CityDao cd = new CityDao(); List list = cd.getAllCities(); //將所有的城市包裝為一個JSON。 StringBuffer sb = new StringBuffer("{cities:["); for(int i=0; list!=null && i<list.size(); i++){ JSONObject jsonObj = new JSONObject(list.get(i)); sb.append(jsonObj.toString()).append(","); } //為JSON數據添加結尾 String result = null; if(list!=null && list.size()>0) result = sb.substring(0,sb.length()-1) + "]}"; else result = sb.toString() + "]}"; //向頁面發送數據 response.setCharacterEncoding("UTF-8"); response.setContentType("text/javascript"); response.getWriter().print(result); return null; } |
數據庫操作部分,在這就不列舉了。因為之前的日志中已經有了!
練習二:校驗用戶注冊
與練習一相同,這里也沒有編寫service層。
我只將AJAX部分的javascript粘貼出來:
<script type="text/javascript" src="${pc}/scripts/jquery- <script type="text/javascript" src="${pc}/scripts/jquery.blockUI.js"></script> <script type="text/javascript"> // 頁面被加載完成后 $(function(){ // 用戶名合法性校驗函數 function doRegCheckout(username){ var reg1 = /^\s*|\s*$/gi; username = username.replace(reg1,""); // 長度全法性校驗 if(username.length < 6 ){ $(":text").val(username); $("#message").html("<font color='red'>用戶名長度至少為6個字符!</font>"); return false; } // 內容合法性校驗 var reg2 = /^[a-zA-Z]\w+$/; if(!reg2.test(username)){ $("#message").html("<font color='red'>用戶名必須以字母開始,可以包含數字和下劃線!</font>"); return false; } // 提交 var url = "${pc}/reg.do"; var args = {username:username, time:new Date()}; // 向Action發出用戶是否存在的校驗 $.post(url,args,function(data){ $("#message").html(data); }); return false; } // 當用戶名文本框內容被改變時,進行用戶名合法性校驗! $(":text").change(function(){ doRegCheckout($(this).val()); }); // 當用戶名文本框內容被改變時,進行用戶名合法性校驗! $(":submit").click(function(){ return doRegCheckout($(":text").val()); }); }); </script> |
正則表達式很重要哦!程序員必備的七種武器之一!
練習結尾,加油!