十三、Ajax结合struts的应用

最新推荐文章于 2021-08-06 12:49:40 发布
最新推荐文章于 2021-08-06 12:49:40 发布
阅读量253 收藏
点赞数
分类专栏： 小白 - WEB框架（高）-Struts2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45602227/article/details/106250141
版权

一、Ajax结合struts的应用，如何获取响应数据

		
		1.Ajax请求数据，服务器端必须以流的方式。
		  否则如果使用跳转的方式，则会重置浏览器端界面，ajax失效。
		
		2.Ajax结合struts应用，struts肯定不能以跳转的方式传输数据。
		  
		  Ajax结合struts应用，实现局部刷新:			
		  									1.AjAX请求数据，在strust中获取输出流写出数据。
											  同时，struts方法不返回结果标记。
											
											2.Ajax请求数据，struts以json的方式写出数据。
											  借助struts-json-plugin的插件包。

二、案例

2.1 Ajax请求数据，在struts中获取输出流写出数据

	Ajax请求数据，strust以流的方式写出。不美观。
CheckCodeAction.java
public class CheckCodeAction {
	
	private String code;

	public String getCode() {
		return code;
	}

	public void setCode(String code) {
		this.code = code;
	}
	
	
	public String checkCode() throws IOException {
		System.out.println("校验验证码");
		
		
		String target = (String) ActionContext.getContext().getSession().get("CODE");
		
		PrintWriter pw = ServletActionContext.getResponse().getWriter();

		if(code.equals(target)) {
			pw.write("./images/MsgSent.gif");
		}else {
			pw.write("./images/MsgError.gif");
		}
		
		//这种方式不太优雅。struts有更好的方式。
		//ps：那种方式也很垃圾
		return null;
	}
	
}
EncodeInterceptor .java
public class EncodeInterceptor implements Interceptor{



	@Override
	public void destroy() {
		// TODO Auto-generated method stub
		
	}

	@Override
	public void init() {
		// TODO Auto-generated method stub
		
	}

	@Override
	public String intercept(ActionInvocation ai) throws Exception {
		HttpServletRequest request = ServletActionContext.getRequest();
		HttpServletResponse response = ServletActionContext.getResponse();
		
		//设置编码
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");
		
		return ai.invoke();
	}
	
	
}
struts.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
          "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
          "http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
    <package name="xxxx" extends="struts-default">
    	
    	<!-- 加入拦截器 -->
    	<interceptors>
    		<interceptor name="encode" class="org.jsoft.interceptor.EncodeInterceptor"></interceptor>
    		<interceptor-stack name="myStack">
    			<interceptor-ref name="encode"></interceptor-ref>
    			<interceptor-ref name="defaultStack"></interceptor-ref>
    		</interceptor-stack>
    	</interceptors>
    	<default-interceptor-ref name="myStack"></default-interceptor-ref>
    	
    	<action name="checkCode" class="org.jsoft.controller.CheckCodeAction" method="checkCode">
    	</action>
    
    
    
    </package> 
</struts>
checkcode.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	
	<form action="./checkcode">
		<table border="0" style="margin:100px auto;" cellspacing="0" >
				
				<tr>
					<td>用户名: </td>
					<td><input type="text" name="userName" ></td>
				</tr>
						
				<tr>
					<td>密码: </td>
					<td><input type="text" name="pwd"></td>
				</tr>
				
				<tr>
					<td>验证码: </td>
					<td>
						<input type="text" onkeyup="checkCode(this)" />
						<img src="image.jsp" width="100px" height="30px"  >
						<span><img src="" name="img"></span>
					</td>
				</tr>
				
				<tr>
					<td colspan="2"><input type="button" value="提交"></td>
				</tr>
		</table>
	</form>
	<script type="text/javascript">
	
		var userName=document.getElementsByName("userName")[0];
		var pwd=document.getElementsByName("pwd")[0];
		var img=document.getElementsByName("img")[0];

		//创建异步对象
		function createAJAX(){		
			var ajax=null;			
			try{				
				ajax=new ActiveXObject("microsoft.xmlhttp");		
			}catch(e){
					try{
						ajax=new XMLHttpRequest();
					}catch (e) {
						alert("你的浏览器没有异步对象")
					}
			}			
			return ajax;
		}	
	
		function checkCode(obj){
			var str = obj.value.trim();
			if(str.length != 4){
				return;
			}
			
			//创建
			var ajax=createAJAX();
			//准备
			var method="GET";

			var url="./checkCode?code="+obj.value;
			alert(url)
			ajax.open(method,url);
			
			//设置
			//ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");			
			
			//发送
			ajax.send(null);
			
			//监听
			ajax.onreadystatechange=function(){

				if(ajax.readyState ==4){
					if(ajax.status == 200 ){
						console.log(ajax)
						 var imgUrl=ajax.responseText;
						 console.log(imgUrl)
						 img.src=imgUrl;
						 img.style.width="70px";
						 img.style.height="40px"
					}
				}
			}
		}
	
	</script>
</body>
</html>
image.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ page contentType="image/jpeg"  import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" %>
<%!
	public Color getColor(){
		Random random = new Random();
		int r = random.nextInt(256);//0-255
		int g = random.nextInt(256);
		int b = random.nextInt(256);
		return new Color(r,g,b);
	}
	public String getNum(){
		String str = "";
		Random random = new Random();
		for(int i=0;i<4;i++){
			str += random.nextInt(10);//0-9
		}
		return str;
	}
%>
<%
	//清除缓存。防止浏览器缓存验证码
	response.setHeader("pragma", "mo-cache");
	response.setHeader("cache-control", "no-cache");
	response.setDateHeader("expires", 0);
	
	BufferedImage image = new BufferedImage(80,30,BufferedImage.TYPE_INT_RGB);
	
	Graphics g = image.getGraphics();
	g.setColor(new Color(200,200,200));
	g.fillRect(0,0,80,30);
	
	
	for (int i = 0; i < 30; i++) {
		Random random = new Random();
		int x = random.nextInt(80);
		int y = random.nextInt(30);
		int xl = random.nextInt(x+10);
		int yl = random.nextInt(y+10);
		g.setColor(getColor());
		g.drawLine(x, y, x + xl, y + yl);
	}
	
	
	g.setFont(new Font("serif", Font.BOLD,16));
	g.setColor(Color.BLACK);
	String checkNum = getNum();//"2525"
	
	StringBuffer sb = new StringBuffer();
	for(int i=0;i<checkNum.length();i++){
		sb.append(checkNum.charAt(i)+" ");//"2 5 2 5"
	}
	g.drawString(sb.toString(),15,20);
	
	session.setAttribute("CODE",checkNum);//2525
	
	ImageIO.write(image,"jpeg",response.getOutputStream());
	out.clear();
	out = pageContext.pushBody();
%>
测试
	输入验证码，后台进行校验

在这里插入图片描述
在这里插入图片描述

2.2 Ajax请求数据，struts以json的方式写出数据

CheckCodeAction.java
public class CheckCodeAction {
	
	private String code;

	public String getCode() {
		return code;
	}

	public void setCode(String code) {
		this.code = code;
	}
	
	
	
	
	//写出json数据
	private String checkCodeMsg;
	public String getCheckCodeMsg() {
		return checkCodeMsg;
	}


	public String checkCode() throws IOException {
		System.out.println("校验验证码");
		
		
		String target = (String) ActionContext.getContext().getSession().get("CODE");
		
		PrintWriter pw = ServletActionContext.getResponse().getWriter();

		if(code.equals(target)) {
			checkCodeMsg="./images/MsgSent.gif";
		}else {
			checkCodeMsg="./images/MsgError.gif";
		}
		
		//必须返回success标记。 JSON拦截器获取到成功标记后，才会将当前action对象的属性解析为json
		return "success";
	}
	
	
	
}
EncodeInterceptor .java
public class EncodeInterceptor implements Interceptor{



	@Override
	public void destroy() {
		// TODO Auto-generated method stub
		
	}

	@Override
	public void init() {
		// TODO Auto-generated method stub
		
	}

	@Override
	public String intercept(ActionInvocation ai) throws Exception {
		HttpServletRequest request = ServletActionContext.getRequest();
		HttpServletResponse response = ServletActionContext.getResponse();
		
		//设置编码
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");
		
		return ai.invoke();
	}
	
	
}
struts.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
          "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
          "http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>


    <package name="xxxx" extends="json-default">
    	
    	<!-- 加入拦截器 -->
    	<interceptors>
    		<interceptor name="encode" class="org.jsoft.interceptor.EncodeInterceptor"></interceptor>
    		<interceptor-stack name="myStack">
    			<interceptor-ref name="encode"></interceptor-ref>
    			<interceptor-ref name="defaultStack"></interceptor-ref>
    		</interceptor-stack>
    	</interceptors>
    	<default-interceptor-ref name="myStack"></default-interceptor-ref>
    	
    	<!-- 设置请求路径与资源映射 -->
    	<action name="checkCode" class="org.jsoft.controller.CheckCodeAction" method="checkCode">
    		<result type="json" />
    	</action>
    
    
    
    </package> 
</struts>
checkcode.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	
	<form action="./checkcode">
		<table border="0" style="margin:100px auto;" cellspacing="0" >
				
				<tr>
					<td>用户名: </td>
					<td><input type="text" name="userName" ></td>
				</tr>
						
				<tr>
					<td>密码: </td>
					<td><input type="text" name="pwd"></td>
				</tr>
				
				<tr>
					<td>验证码: </td>
					<td>
						<input type="text" onkeyup="checkCode(this)" />
						<img src="image.jsp" width="100px" height="30px"  >
						<span><img src="" name="img"></span>
					</td>
				</tr>
				
				<tr>
					<td colspan="2"><input type="button" value="提交"></td>
				</tr>
		</table>
	</form>
	<script type="text/javascript">
	
		var userName=document.getElementsByName("userName")[0];
		var pwd=document.getElementsByName("pwd")[0];
		var img=document.getElementsByName("img")[0];

		//创建异步对象
		function createAJAX(){		
			var ajax=null;			
			try{				
				ajax=new ActiveXObject("microsoft.xmlhttp");		
			}catch(e){
					try{
						ajax=new XMLHttpRequest();
					}catch (e) {
						alert("你的浏览器没有异步对象")
					}
			}			
			return ajax;
		}	
	
		function checkCode(obj){
			var str = obj.value.trim();
			if(str.length != 4){
				return;
			}
			
			//创建
			var ajax=createAJAX();
			//准备
			var method="GET";

			var url="./checkCode?code="+obj.value;
			alert(url)
			ajax.open(method,url);
			
			//设置
			//ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");			
			
			//发送
			ajax.send(null);
			
			//监听
			ajax.onreadystatechange=function(){

				if(ajax.readyState ==4){
					if(ajax.status == 200 ){
						console.log(ajax)
						
						 //返回JAVA格式的JSON文本
						 var jsonText=ajax.responseText;
						 alert(jsonText);
						 
						 //将JSON文本转为JSON对象
						 var jsonObj=eval("("+jsonText+")");

						 img.src=jsonObj.checkCodeMsg;
						 img.style.width="70px";
						 img.style.height="40px"
					}
				}
			}
		}
	
	</script>
</body>
</html>
image.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ page contentType="image/jpeg"  import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" %>
<%!
	public Color getColor(){
		Random random = new Random();
		int r = random.nextInt(256);//0-255
		int g = random.nextInt(256);
		int b = random.nextInt(256);
		return new Color(r,g,b);
	}
	public String getNum(){
		String str = "";
		Random random = new Random();
		for(int i=0;i<4;i++){
			str += random.nextInt(10);//0-9
		}
		return str;
	}
%>
<%
	//清除缓存。防止浏览器缓存验证码
	response.setHeader("pragma", "mo-cache");
	response.setHeader("cache-control", "no-cache");
	response.setDateHeader("expires", 0);
	
	BufferedImage image = new BufferedImage(80,30,BufferedImage.TYPE_INT_RGB);
	
	Graphics g = image.getGraphics();
	g.setColor(new Color(200,200,200));
	g.fillRect(0,0,80,30);
	
	
	for (int i = 0; i < 30; i++) {
		Random random = new Random();
		int x = random.nextInt(80);
		int y = random.nextInt(30);
		int xl = random.nextInt(x+10);
		int yl = random.nextInt(y+10);
		g.setColor(getColor());
		g.drawLine(x, y, x + xl, y + yl);
	}
	
	
	g.setFont(new Font("serif", Font.BOLD,16));
	g.setColor(Color.BLACK);
	String checkNum = getNum();//"2525"
	
	StringBuffer sb = new StringBuffer();
	for(int i=0;i<checkNum.length();i++){
		sb.append(checkNum.charAt(i)+" ");//"2 5 2 5"
	}
	g.drawString(sb.toString(),15,20);
	
	session.setAttribute("CODE",checkNum);//2525
	
	ImageIO.write(image,"jpeg",response.getOutputStream());
	out.clear();
	out = pageContext.pushBody();
%>
测试
	输入验证码，后台进行校验

在这里插入图片描述
在这里插入图片描述

二旬、
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
struts实现ajax,Struts 2中实现Ajax的三种方式
weixin_34194482的博客
08-06 928
Ajax本质上和普通的HTTP请求是一样的，只不过普通的HTTP请求是给人看的，而Ajax请求是给JS代码去用的。所以Ajax请求的页面一般比普通的HTTP请求的响应内容还要简单，可能是一个页面的一部分，也可能是xml、json等结构化的数据，还可能是一个简单的字符串。所以，在Struts 2中使用Ajax，Action一般就不会调用一个jsp视图来显示了(如果Ajax请求内容是页面的一部分也可能...
struts1中的jQuery ajax
David_lou的专栏
11-11 2990
上个星期做了上传Excel的功能，本来想使用jQuery的
struts2的ajax异步请求访问
01-26
struts2的ajax异步请求访问方式，不采用servlet的writer模式
struts2怎么处理ajax请求
minolk的博客
07-01 5859
struts2接收ajax请求参数有三种方法首先说一下struts2是线程安全的，为什么说struts2是线程安全的呢，因为在struts2中struts2把所有的域对象全都封装到了actioncontext对象中，所以actioncontext对象的生命周期和request域对象的生命周期相同，也就是每次请求的到来会重新去创建一个actioncontext对象,所以请求与请求之间不使用相同的资源...
Struts2与ajax，ajax上传
游王子的博客
11-18 515
一、使用ajax提交到Struts
Struts中使用ajax
ab599100347的专栏
04-21 520
ajax在Struts中的使用
Ajax DWR struts 应用案例
05-17
将Ajax、DWR和Struts结合使用，可以在Struts框架的基础上增强Web应用的交互性和实时性。DWR作为一个中间层，允许Ajax在客户端与Struts控制器进行通信。例如，当用户在前端执行某些操作时，DWR可以调用Struts Action...
Struts+ajax
12-26
1. **增加（Create）**：在传统的Struts应用中，用户填写表单后提交，页面会跳转到新的结果页面。而使用Ajax，用户在提交表单时，可以通过JavaScript触发Ajax请求，将数据发送到服务器的Struts Action。Action处理完...
Struts2+Jquery+Ajax
07-16
在Struts2中，Jquery可以与Ajax结合使用，实现页面的无刷新更新。 Ajax（Asynchronous JavaScript and XML）技术允许前端与后台进行异步通信，无需整个页面刷新，提高了用户体验。在Struts2框架下，我们可以使用...
Ajax+Struts应用(完整源码）
01-30
本资源提供了一个完整的 Ajax+Struts 应用的源码，这为我们深入理解这两种技术的结合提供了宝贵的实例。 Ajax（Asynchronous JavaScript and XML）是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页的...
struts2ajax
03-06
三个ajax与struts2交互的例子
Struts2+Ajax实现的用户登录
01-13
Struts2+Ajax实现的用户登录 Struts2 Ajax Sprint Hibernate
struts2对AJAX的支持
03-28
NULL 博文链接：https://87029274.iteye.com/blog/1253698
ajax在struts中得应用
02-23
1. **无侵入性**：由于AJAX只是一项技术，因此它可以无缝集成到现有的Struts应用中，无需替换现有库或服务器代码。 2. **效率提升**：通过局部刷新，AJAX减少了不必要的页面加载时间，提升了用户界面的响应速度。 3....
Struts中应用Ajax技术
super_longyu的博客
11-02 426
struts2框架中应用Ajax
Struts2与Ajax
SpringJava的博客
04-24 112
Struts2和Struts相比，一个重大改进就是支持Ajax。　本文主要看一下Struts2中的Div是如何用来输出Ajax结果，其中主要使用了Dojo。 首先，我们先创建一个简单的用例，在这个用例中，将在屏幕上显示一个用户列表，点击列表中的userid时，列表的下方将显示用户的详细信息，显示用户详细信息的这个步骤我们将使用Ajax。 一、创建web.xml &lt;?xml ...
struts2实现ajax功能
红桃峰峰 的博客
06-29 6546
在struts2项目中，我们也会使用到ajax功能，此时，可以使用servletAPI来实现ajax的功能，下面我们来写一个简单的 demo来演示一下ajax功能。 项目结构： index.jsp页面代码： <% String path = request.getContextPath(); String basePath = request.getSchem
struts注解 ajax,struts2实现ajax校验的2种方法详解
weixin_30903865的博客
08-06 210
共同的一点是，Action都需要将一个方法暴露出来，给前端javascript调用javascript的代码都是一样的：Js代码 functiontestAjax(){var$userNameInput=$("#ajax_username");varuserName=$userNameInput.val();$.ajax({url:"originAjax.action",type...
在Struts应用中使用Ajax
龙的天空
03-16 1249
未使用AJAX之前 AJAX
AJAX与Struts结合的Web应用实践
"这篇论文详细探讨了如何在Web应用开发中结合使用AJAX（Asynchronous JavaScript and XML）技术和Struts框架，以创建更动态、响应更快的Web应用程序。作者们来自长沙大学的计算机教学中心和计算机科学与技术系，他们...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值