• Struts2+Ajax实现检测用户名是否唯一


    搞了慢慢两天,终于弄明白了怎么在Struts2框架中使用Ajax检测用户名的存在了。虽然,比起那些大牛们来,这速度确实够慢的,不过,最终弄出来还是满满的成就感啊。

    闲话休提,言归正传。直接上代码:

    Action:

     1 package com.bbs.action;
     2 
     3 import javax.servlet.http.HttpServletRequest;
     4 import javax.servlet.http.HttpServletResponse;
     5 import org.apache.struts2.ServletActionContext;
     6 
     7 import com.bbs.model.*;
     8 import com.opensymphony.xwork2.*;
     9 
    10 @SuppressWarnings("serial")
    11 public class CheckUser extends ActionSupport {
    12     //private String username;
    13     public String execute() throws Exception {
    14         HttpServletRequest req = ServletActionContext.getRequest();
    15         HttpServletResponse res = ServletActionContext.getResponse();
    16         String username = req.getParameter("username");
    17         res.setContentType("text/html;charset=UTF-8");
    18         String responseStr = "";
    19         UserDAO udao = new UserMySQLDAO();
    20         if (udao.ValiUserByName(username)) {
    21             res.getWriter().print("exists");
    22         } else {
    23             responseStr = "你可以使用该用户名";
    24             res.getWriter().print(responseStr);
    25         }
    26         return null;
    27     } 28 }

    这里第一行的package是我自己定义的Action包。网上有好多例子是JavaScript与JSP通信或者Servlet通信,但是鲜有与Action传递参数的例子。但我就是想让JSP做纯粹是展现的东西,并且如果再加上Servlet话,会破坏原有的MVC清晰架构,所以在这一点上,我相信自己的坚持是对的。

    至于怎么检测用户名是否在数据库中存在,这就是一个很easy的问题了,此处就不讲了,重点讲一下我是怎么架构的,其他无关紧要的细节,或者一搜就能搜到的解释,本着简明扼要的原则,一概忽略之。

    JavaScript:

     1 var req;
     2 var span;
     3 function Check(field) {
     4     span = document.getElementById("result");
     5     if(field.value == '') {
     6         span.style.color = "red";
     7         span.innerHTML="用户名不能为空";
     8         return false;
     9     }    
    10     if(window.XMLHttpRequest) {   //其他非IE浏览器支持
    11         req = new XMLHttpRequest();
    12     }else if(window.ActiveXObject) { //微软的IE支持
    13         req = new ActiveXObject("Microsoft.XMLHTTP");
    14     }
    15     
    16     req.onreadystatechange = press;
    17     req.open("POST", "http://localhost:8080/BBS/CheckUser?username="+field.value, true);
    18     req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    19     req.send("");
    20 }
    21 
    22 function press() {
    23     if(req.readyState < 4) {
    24         span.style.color = "blue";
    25         span.innerHTML="正在检测";
    26     }
    27     if(req.readyState == 4) {
    28         if(req.status == 200) {
    29             if(req.responseText == "exists") {
    30                 span.style.color = "red";
    31                 span.innerHTML="用户名已经存在";
    32             }else {
    33                 span.style.color = "green";
    34                 span.innerHTML="您可以使用该用户名";
    35             }            
    36         }
    37     }
    38 }

    这一段代码是用来实现Ajax用户名检测的部分。第5-9行是检测用户名为空的代码,很好理解。重点是后面的部分。首先,建立一个XMLHttpRequest对象,这是实现Ajax的核心部分,只有用它才能用来

    向后台发送请求,发送请求分两步:打开连接,发送请求。

    打开连接用open方法。

    open方法的原型 open("method","URL",[,asyncFlag[,"userName"[,"password"]]]);

    method:POST/GET。这两种方法的区别就不详细介绍了,到处都有介绍。需要注意一点是:必须要有双引号,我就因为没加引号,找了半天才找到原因,汗

    asyncFlag:true代表异步,一般情况下我们应该选择这个;false代表同步。

    后面的username和password则专用于一些远程服务。

    发送请求用send方法。

    send(content);//content 是请求参数。一般情况下可以省略。

    setRequestHeader():在发送之前要设置请求头。

    onreadystatechange参数用来设置相应的回调函数。

    后面的press就是那个回调函数。

    关于status的各种解释此处从略。

    这里的span就是用来在用户名输入框后面做语句展现的。

    HTML代码:

    1 <input  id="regusername" type="text" name="username" size="50" maxlength="12" value=""  autocomplete="off" onblur="Check(this)"/>    
    2 <span id = "result"></span>    

    Action部分:

    1 <package name="server" namespace="/"  extends="struts-default">
    2         <action name="CheckUser" class="com.bbs.action.CheckUser">
    3             <result name="success">Welcome.jsp</result>
    4             <result name="input">Register.jsp</result>
    5          </action>
    6 </package>

    其实此处的result部分,无所谓了,因为注意一下前面的Action最后返回的是null,为什么是null呢?因为前面的JavaScript部分,有一句是利用responseText与字符串比较来产生不同的效果。

    如果是success或者input的话,会直接将跳转后的页面(Welcome.jsp/Register.jsp)返回过来。此处又折腾了半天,汗。

    另外虽然好多资料都讲到responseText是一个字符串,但是实际上,不能完全按照字符串的处理方法去处理他,刚开始我用equals函数,没有反应,后来改成==才能达到效果。

    总之,费了九牛二虎之力终于还是搞定了,还是觉得自己很菜很菜,但是只要相信自己一定能做到,那么你就肯定能做到。遇到困难不要急躁,总会有办法的。虽然有点鸡汤,但望诸君切记。

    下一步,打算实现Ajax分页。

  • 相关阅读:
    数据库操作
    用php输出心形曲线
    Hibernate入门(一)
    JavaScript中的三种弹窗
    java过滤器(过滤器排序)
    java过滤器(简化认证)
    Mysql中的外键分析(什么是外键,为什么要用外键,添加外键,主外键关联删除)
    java回调函数学习
    继承
    多态(一)
  • 原文地址:https://www.cnblogs.com/xuehanlee/p/4541276.html
Copyright © 2020-2023  润新知