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>

 

         正则表达式很重要哦!程序员必备的七种武器之一!

 

         练习结尾,加油!


只有注册用户登录后才能发表评论。


网站导航: