ajax交互Struts2的action(客户端/服务器端)

更新时间：2013年08月14日 17:52:46 作者：

本文为大家探讨下ajax交互Struts2的action并有客户端及服务器端代码，感兴趣的朋友可以参考下，希望对大家有所帮助

1.客户端网页代码

 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=GB18030"> 
<title>检测用户名是否唯一</title> 
<script language="javascript"> 
function createRequest(url) { 
http_request = false; 
if (window.XMLHttpRequest) { // 非IE浏览器 
http_request = new XMLHttpRequest(); //创建XMLHttpRequest对象 
} else if (window.ActiveXObject) { // IE浏览器 
try { 
http_request = new ActiveXObject("Msxml2.XMLHTTP"); //创建XMLHttpRequest对象 
} catch (e) { 
try { 
http_request = new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLHttpRequest对象 
} catch (e) { 
} 
} 
} 
if (!http_request) { 
alert("不能创建XMLHttpRequest对象实例！"); 
return false; 
} 
http_request.onreadystatechange = getResult; //调用返回结果处理函数 
http_request.open('GET', url, true); //创建与服务器的连接 
http_request.send(null); //向服务器发送请求 
} 
function getResult() { 
if (http_request.readyState == 4) { // 判断请求状态 
if (http_request.status == 200) { // 请求成功，开始处理返回结果 
document.getElementById("toolTip").innerHTML = http_request.responseText; //设置提示内容 
document.getElementById("toolTip").style.display = "block"; //显示提示框 
} else { // 请求页面有错误 
alert("您所请求的页面有错误！"); 
} 
} 
} 
function checkUser(userName) { 
if (userName.value == "") { 
alert("请输入用户名！"); 
userName.focus(); 
return; 
} else { 
//createRequest('http://10.65.9.181:8090/ajax/checkUser.jsp?user='+userName.value); 
createRequest('http://10.65.9.181:8090/ajax/checkUser.action?user=' 
+ userName.value); 
} 
} 
</script> 
<style type="text/css"> 
<!-- 
#toolTip { 
position: absolute; 
left: 331px; 
top: 39px; 
width: 98px; 
height: 48px; 
padding-top: 45px; 
padding-left: 25px; 
padding-right: 25px; 
z-index: 1; 
display: none; 
color: red; 
background-image: url(images/tooltip.jpg); 
} 
--> 
</style> 
</head> 
<body style="margin: 0px;"> 
<form method="post" action="" name="form1"> 
<table width="509" height="352" border="0" align="center" 
cellpadding="0" cellspacing="0" background="images/bg.gif"> 
<tr> 
<td height="54"> </td> 
</tr> 
<tr> 
<td height="253" valign="top"> 
<div style="position: absolute;"> 
<table width="100%" height="250" border="0" cellpadding="0" 
cellspacing="0"> 
<tr> 
<td width="18%" height="54" align="right" style="color: #8e6723"><b>用户名：</b></td> 
<td width="49%"><input name="username" type="text" 
id="username" size="32"></td> 
<td width="33%"><img src="images/checkBt.jpg" width="104" 
height="23" style="cursor: hand;" 
onClick="checkUser(form1.username);"></td> 
</tr> 
<tr> 
<td height="51" align="right" style="color: #8e6723"><b>密码：</b></td> 
<td><input name="pwd1" type="password" id="pwd1" size="35"></td> 
<td rowspan="2"> 
<div id="toolTip"></div> 
</td> 
</tr> 
<tr> 
<td height="56" align="right" style="color: #8e6723"><b>确认密码：</b></td> 
<td><input name="pwd2" type="password" id="pwd2" size="35"></td> 
</tr> 
<tr> 
<td height="55" align="right" style="color: #8e6723"><b>E-mail：</b></td> 
<td colspan="2"><input name="email" type="text" id="email" 
size="45"></td> 
</tr> 
<tr> 
<td> </td> 
<td colspan="2"><input type="image" name="imageField" 
src="images/registerBt.jpg"></td> 
</tr> 
</table> 
</div> 
</td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
</table> 
</form> 
</body> 
</html> 

2.服务器端代码
Action类的代码

复制代码代码如下:

 
package com.action; 
import java.util.Map; 
import com.opensymphony.xwork2.ActionContext; 
import com.opensymphony.xwork2.ActionSupport; 
import com.xzy.UserDAO; 
public class CheckUserAction extends ActionSupport{ 
private String user; 
public String findUserByName(){ 
String info = null; 
UserDAO userdao = new UserDAO(); 
if(userdao.findUserByName(user)){ 
//info="用户名已经被注册"; 
Map map = (Map)ActionContext.getContext().get("request"); 
map.put("info", "用户名已经被注册"); 
return "success"; 
}else{ 
//info="用户名可以注册"; 
Map map = (Map)ActionContext.getContext().get("request"); 
map.put("info", "用户名可以注册使用"); 
return "fail"; 
} 
} 

public String getUser() { 
return user; 
} 

public void setUser(String user) { 
this.user = user; 
} 
} 

struts.xml配置

复制代码代码如下:

 
<?xml version="1.0" encoding="UTF-8" ?> 
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd"> 
<struts> 
<package name="myPackage" extends="struts-default"> 
<!-- 定义action --> 
<action name="checkUser" class = "com.action.CheckUserAction" method="findUserByName"> 
<!-- 定义处理成功后的映射页面 --> 
<result >/info.jsp</result> 
</action> 
</package> 
</struts> 

info.jsp为显示信息页面

复制代码代码如下:

 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
<%=request.getAttribute("info")%> 

info.jsp是jsp页面，对于与安卓客户端交互的jsp页面而言，尽量略去不必要的html代码，只需要保留控制编码格式的代码和<%%>之间的处理代码,这样就避免了在安卓客户端显示不必要的垃圾代码，且提高了执行效率，降低了服务器负载。
数据库截图:

最终效果图：

您可能感兴趣的文章:

使用Ajax方法实现Form表单的提交及注意事项
这篇文章主要介绍了使用Ajax方法实现Form表单的提交及注意事项,需要的朋友可以参考下
2017-07-07
Ajax方式提交带文件上传的表单及隐藏iframe应用
一般的表单都是通过ajax方式提交，所以碰到带文件上传的表单就比较麻烦,基本原理就是在页面增加一个隐藏iframe，然后通过ajax提交除文件之外的表单数据,感兴趣的你不妨了解一下，或许本文对你有所帮助
2013-01-01
Ajax实现异步用户名验证功能
当用户填写好账号切换到密码框的时候，使用ajax验证账号的可用性。这篇文章就主要为大家详细介绍了Ajax实现异步用户名验证功能，感兴趣的小伙伴们可以参考一下
2016-05-05
使用Ajax实现简单的带百分比进度条实例
最近做项目遇到这样的需求要求当进行文件长传保存等操作时，能在页面显示一个带百分比的进度条，给用户一个好的交互体验，下面通过实例代码给大家介绍基于ajax实现带百分比进度条效果，需要的的朋友参考下吧
2017-07-07
使用Ajax时处理用户session失效问题的解决方法
这篇文章主要为大家详细介绍了使用Ajax时处理用户session失效问题的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
ajax提交整个from表单示例代码
这篇文章主要介绍了ajax提交整个from表单实现代码,需要的朋友可以参考下
2014-05-05
Ajax实现无闪烁定时刷新页面实例代码
这篇文章主要介绍了使用Ajax技术实现无闪烁定时刷新页面实例代码，非常不错具有参考借鉴价值，感兴趣的朋友一起看下吧
2016-05-05
ajax实现无刷新上传文件功能
这篇文章主要为大家详细介绍了ajax实现无刷新上传文件功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
Ajax提交post请求案例分析
这篇文章主要介绍了Ajax提交post请求,结合具体案例形式分析了ajax提交post请求相关原理、用法及操作注意事项,需要的朋友可以参考下
2019-07-07
Ajax删除数据与查看数据操作
这篇文章主要介绍了Ajax删除数据与查看数据操作,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-03-03