posts - 78, comments - 34, trackbacks - 0, articles - 1
            BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理

          今天早上老佟將昨天的練習進行了講解。今天的主要內容是對AJAX的匯總練習,做了兩個練習都是比較常使用的應用。

           

          一、              下拉框的級聯,比如,選擇下拉框一中的內容(城市名稱),在下拉框二中顯示在這個城市中的部門。在下拉框二中選擇部門名稱,在下拉框三中顯示部門的人員。在下拉框中選擇人員名稱,在表格中顯示人員具體信息。這就是級聯,數據存儲在數據庫中。使用AJAX技術只更新當前頁面部分內容,無須刷新整個頁面。

          二、              用戶注冊功能,提示用戶名是否合法等。同樣也是使用AJAX技術。

           

          這兩個練習大家都比較常見,WEB已經這么流行了!Ok,接下來讓我們看看具體流程。我把這兩個圖畫一下。(只為AJAXStruts1的配合練習)

           

          練習一:下拉框的級聯

          clip_image001

           

                   以上沒有使用service層,那樣做會使程序更優雅。但對于這個小練習沒有必要,甚至編寫多個DAO也沒必要,老佟只編寫了一個DAO。在這里我們麻煩一下自己吧!

           

                   這里與頁面的交互數據是JSONJSON用在表單上十分方便。

           

          列出一部分程序的代碼,在頁面加載時。需要獲取城市列表,并將城市添加到下拉列表框中(對應的項目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;

              }

                  

                   數據庫操作部分,在這就不列舉了。因為之前的日志中已經有了!

           

          練習二:校驗用戶注冊

           

           

          clip_image002

                   與練習一相同,這里也沒有編寫service層。

           

                   我只將AJAX部分的javascript粘貼出來:

          <script type="text/javascript" src="${pc}/scripts/jquery-1.3.1.js"></script>

          <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>

           

                   正則表達式很重要哦!程序員必備的七種武器之一!

           

                   練習結尾,加油!


          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          主站蜘蛛池模板: 临沧市| 海晏县| 浦北县| 武山县| 日喀则市| 齐河县| 孝义市| 自治县| 南雄市| 普洱| 宿松县| 鄂托克旗| 西丰县| 藁城市| 彝良县| 重庆市| 宿松县| 靖远县| 同心县| 龙陵县| 安乡县| 保德县| 宜兰县| 靖西县| 新泰市| 腾冲县| 日照市| 庆阳市| 安达市| 镇远县| 白城市| 四川省| 四子王旗| 南漳县| 武山县| 新河县| 大安市| 青阳县| 连平县| 阳新县| 上林县|