Java程序员从笨鸟到菜鸟之(七十五)细谈struts2(十四)struts2+ajax实现异步验证

      

         由于老师布置作业的需要,在添加管理员的时候,要实现验证添加的管理员的用户名是否在数据库中已经存在,然后再客户端给用户一个提示。我首先想到的就是利用ajax实现异步验证技术,由于利用的ssh框架,所以在这要对struts2ajax进行整合,由于我还没把ajax的一些知识总结出来,所以在这也不提了,有关ajax的详细内容将会在以后的博客中写出来。现在我们就以我做的这个添加管理员,验证管理员的用户名是否存在来说一下这个struts2+ajax实现异步验证技术。

     首先我们来看一下我们的form表单:

<td>
用户名
</td>
<td>
<input type="text" name="admin.username" value=""
οnblur="checkusername(this,'AdminAction!exists')" />
</td>
<td>
<span id="namemessage" style="color: red;"></span>
</td>
</tr>
<tr bgColor="#d6fdd0">
<td>
密码
</td>
<td>
<input type="password" name="admin.password" value="" />
</td>
<td>
<span></span>
</td>
</tr>


我们可以看到当我们的用户名的文本域注册了一个onblur事件,当用户名这个文本域失去焦点的时候我们就会让他去执行checkusername方法,好,下面让我们来看一下我们的js是怎么实现的ajax

<script type="text/javascript">
var xmlHttpRequest = null; //声明一个空对象以接收XMLHttpRequest对象
function checkusername(field, url) {
var uername = field.value;
if (uername == "" || uername.length < 3) {
document.getElementById("namemessage").innerHTML = "用户名应该不小于3位";
return;
} else {
if (window.ActiveXObject) // IE浏览器
{
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) //除IE外的其他浏览器实现
{
xmlHttpRequest = new XMLHttpRequest();
}
if (null != xmlHttpRequest) {
//当利用get方法访问服务器端时带参数的话,直接在"AjaxServlet"后面加参数,                   下面send方法为参数null就可以,用post方法这必须在把参数加在send参数内,如下
xmlHttpRequest.open("get", url+"?admin.username="+uername, true);
//关联好ajax的回调函数
xmlHttpRequest.onreadystatechange = ajaxCallback;
//真正向服务器端发送数据
// 使用post方式提交,必须要加上如下一行,get方法就不必加此句
xmlHttpRequest.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xmlHttpRequest.send(null);
}
}
}
function ajaxCallback() { //ajax一次请求会改变四次状态,所以我们在第四次(即一次请求结束)进行处理就OK,
if (xmlHttpRequest.readyState == 4) { //请求成功
if (xmlHttpRequest.status == 200) {
var responseText = xmlHttpRequest.responseText;
document.getElementById("namemessage").innerHTML = responseText;
}
}
}
</script>


         通过上面的注释我想大家应该能看懂一些内容吧,我们首先去验证填写的内容是否为空,如果为空就给用户以提示。如果不为空的话就去判断一下当前的浏览器,然后根据浏览器去设置xmlHttpRequest对象,xmlHttpRequest对象是什么东西呢?XMLHttpRequest 对象用于在后台与服务器交换数据的对象,他主要的作用:

· 在不重新加载页面的情况下更新网页

· 在页面已加载后从服务器请求数据

· 在页面已加载后从服务器接收数据

· 在后台向服务器发送数据


XMLHttpRequestAjax最核心的对象,它有以下几个重要的方法或属性:
    ●open():建立到服务器的新请求。

    ●send():向服务器发送请求。

    ●abort():退出当前请求。

    ●readyState:提供当前 HTML 的就绪状态。

    ●responseText:服务器返回的请求响应文本。


 其中XMLHttpRequest 对象的 open() 方法有以下五个参数:

 ●request-type:发送请求的类型。典型的值是 GET 或 POST,但也可以发送 HEAD 请求。

 ●url:要连接的 URL

 ●asynch:如果希望使用异步连接则为true,否则为 false。该参数是可选的,默认为 true

 ●username:如果需要身份验证,则可以在此指定用户名。该可选参数没有默认值。

password:如果需要身份验证,则可以在此指定口令。该可选参数没有默认值。


        通常使用其中的前三个参数。事实上,即使需要异步连接,也应该指定第三个参数为 true。这是默认值,但坚持明确指定请求是异步的还是同步的更容易理解。

          得到XMLHttpRequest 对象之后,我们就利用这个对象去后台执行我们的请求,在执行我们请求的时候一定要注意关联好我们的回调函数:xmlHttpRequest.onreadystatechange = ajaxCallback;这里的回调函数的名字可以随便起,并不是固定死的。我们可以看到我们上面的程序请求是发送给了AdminAction中的exists方法了,好,下面我们去action方法里面去看一下:

public String exists() throws Exception{
System.out.println(admin==null);
boolean boo=dao.exists(admin.getUsername());
  //获取原始的PrintWriter对象,以便输出响应结果,而不用跳转到某个试图    
        HttpServletResponse response = ServletActionContext.getResponse();    
        //设置字符集    
        response.setCharacterEncoding("UTF-8");    
        PrintWriter out = response.getWriter();    
if(boo){	     
        //直接输入响应的内容    
        out.println("*用户名已存在*");    
        /**格式化输出时间**/   
        out.flush();    
        out.close();    
}
out.println("*用户名可用*"); 
return null;
}


      熟悉ajax的同学看到这段代码应该很清楚了吧。这里主要是利用了PrintWriter 来把我们的后台信息输出到我们的前台,这里我 就不详细解释了。好了,写到这,我们这个利用struts2+ajax实现的我们的异步验证。下面就是具体的实现效果:



已标记关键词 清除标记
相关推荐
<p> <strong><span style="background-color:#FFFFFF;color:#E53333;font-size:24px;">本页面购买不发书!!!仅为视频课购买!!!</span></strong> </p> <p> <strong><span style="color:#E53333;font-size:18px;">请务必到</span></strong><a href="https://edu.csdn.net/bundled/detail/49?utm_source=banner"><strong><span style="color:#E53333;font-size:18px;">https://edu.csdn.net/bundled/detail/49</span></strong></a><strong><span style="color:#E53333;font-size:18px;">下单购买课+书。</span></strong> </p> <p> <span style="font-size:14px;">本页面,仅为观看视频页面,如需一并购买图书,请</span><span style="font-size:14px;">务必到</span><a href="https://edu.csdn.net/bundled/detail/49?utm_source=banner"><span style="font-size:14px;">https://edu.csdn.net/bundled/detail/49</span></a><span style="font-size:14px;">下单购买课程+图书!!!</span> </p> <p> <br /> </p> <p> <span style="font-size:14px;">疯狂Python精讲课程覆盖《疯狂Python讲义》全书的主体内容。</span> </p> <span style="font-size:14px;">内容包括Python基本数据类型、Python列表、元组和字典、流程控制、函数式编程、面向对象编程、文件读写、异常控制、数据库编程、并发编程与网络编程、数据可视化分析、Python爬虫等。</span><br /> <span style="font-size:14px;"> 全套课程从Python基础开始介绍,逐步步入当前就业热点。将会带着大家从Python基础语法开始学习,为每个知识点都提供对应的代码实操、代码练习,逐步过渡到文件IO、数据库编程、并发编程、网络编程、数据分 析和网络爬虫等内容,本课程会从小案例起,至爬虫、数据分析案例终、以Python知识体系作为内在逻辑,以Python案例作为学习方式,最终达到“知行合一”。</span><br />
<p> <strong><span style="font-size:20px;color:#FF0000;">本课程主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Java学习者</span></strong> </p> <p> <span style="color:#FF0000;"><strong><span style="font-size:18px;">1. 包含:<span style="color:#FFFF00;background-color:#FF0000;">项目源码、</span><span style="color:#FFFF00;background-color:#FF0000;">项目文档、数据库脚本、软件工具</span>等所有资料</span></strong></span> </p> <p> <span style="color:#FF0000;"><strong><span style="font-size:18px;">2. 手把手的带你从零开始部署运行本套系统</span></strong></span> </p> <p> <span style="color:#FF0000;"><strong><span style="font-size:18px;">3. 该项目附带的源码资料可作为毕设使用</span></strong></span> </p> <p> <span style="color:#FF0000;"><strong><span style="font-size:18px;">4. 提供技术答疑和远程协助指导</span></strong></span><strong><span style="font-size:18px;"></span></strong> </p> <p> <br /> </p> <p> <span style="font-size:18px;"><strong>项目运行截图:</strong></span> </p> <p> <strong><span style="font-size:18px;">1)系统登陆界面</span></strong> </p> <p> <strong><span style="font-size:18px;"><img src="https://img-bss.csdn.net/202002241015433522.png" alt="" /><br /> </span></strong> </p> <p> <strong><span style="font-size:18px;"><strong><span style="font-size:18px;">2)学生模块</span></strong></span></strong> </p> <p> <strong><span style="font-size:18px;"><img src="https://img-bss.csdn.net/202002241015575966.png" alt="" /></span></strong> </p> <p> <strong><span style="font-size:18px;"><strong><span style="font-size:18px;">3)教师模块</span></strong></span></strong> </p> <p> <strong><span style="font-size:18px;"><img src="https://img-bss.csdn.net/202002241016127898.png" alt="" /></span></strong> </p> <p> <strong><span style="font-size:18px;"><strong><span style="font-size:18px;">4)系统管理员</span></strong></span></strong> </p> <p> <strong><span style="font-size:18px;"><img src="https://img-bss.csdn.net/202002241016281177.png" alt="" /></span></strong> </p> <p> <strong><span style="font-size:18px;"><img src="https://img-bss.csdn.net/202002241016369884.png" alt="" /></span></strong> </p> <p> <strong><span style="font-size:18px;"><br /> </span></strong> </p> <p> <strong><span style="font-size:18px;"><strong><span style="font-size:18px;">更多Java毕设项目请关注我的毕设系列课程 <a href="https://edu.csdn.net/lecturer/2104">https://edu.csdn.net/lecturer/2104</a></span></strong></span></strong> </p> <p> <strong><span style="font-size:18px;"><br /> </span></strong> </p>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页