struts2实现ajax功能

墨蓝 2022-06-13 06:18 234阅读 0赞

在struts2项目中，我们也会使用到ajax功能，有两种方式来实现ajax功能，一种是可以使用servletAPI来实现ajax的功能，另一种是使用struts2的插件来实现，

下面我们先来写一个简单的

# 在struts2项目中使用servletAPI实现ajax功能 #

demo来演示一下ajax功能。

项目结构：

![Center][]

index.jsp页面代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%
    	String path = request.getContextPath();
    	String basePath = request.getScheme() + "://"
    			+ request.getServerName() + ":" + request.getServerPort()
    			+ path + "/";
    %>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    
    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
    <script type="text/javascript">
    	$(function(){
    		$('#btn').click(function(){
    			$.post("ajax.action" , function(data){
    				$("#msg").html(data) ;
    			}) ;
    		});
    	}) ;
    
    
    </script>
    
    
    </head>
    
    <body>
    	<input type="button" id="btn" value="获取ajax信息" />
    	<h3 id="msg"></h3>
    	<br>
    </body>
    </html>

点击“获取ajax信息按钮”，在js中，通过jQuery来获取button事件然后使用post请求，从Action类中获取信息，展示在h3标签中。

AjaxAction.java代码：

package com.robert.action;
    
    import java.io.IOException;
    
    import javax.servlet.http.HttpServletResponse;
    
    import org.apache.struts2.ServletActionContext;
    
    public class AjaxAction {
    
    	public String execute() throws IOException {
    		HttpServletResponse resp = ServletActionContext.getResponse() ;
    		
    		resp.setCharacterEncoding("utf-8") ;
    		resp.getWriter().print("struts ajax") ;
    		
    		return null ;
    	}
    	
    }

struts.xml代码：

在浏览器中输入URL；http://localhost:8080/ajax/index.jsp，获得如下页面：

![Center 1][]

点击  获取ajax信息 按钮，

![Center 2][]

struts ajax 字符串是AjaxAction类中的

HttpServletResponse resp = ServletActionContext.getResponse()
    		resp.setCharacterEncoding("utf-8") ;
    		resp.getWriter().print("struts ajax") ;

response返回的信息，说明ajax成功。

下面我们来看一下怎么

# 使用struts2插件来实现ajax #

项目结构：

![Center 3][]

struts2实现ajax功能，需要使用插件来实现，插件一共有两个，如图，图中红框中的两个便是struts2实现ajax时，使用的json包

![Center 4][]

其中还有一个json-lib-2.3-jdk15.jar包，这个包中有JSONArray类，有的程序中由于包不对，还有可能报一些错误，

如：java.lang.ClassNotFoundException:org.apache.commons.lang.exception.NestableRuntimeException,

java.lang.NoClassDefaultError:org/apache/commons/collections/map/ListOrderedMap.

我这里遇到了两个，如图：

![Center 5][]

![Center 6][]

这两个都是由于jar的原因，我导入了commons-lang-2.4.jar和commons-collections-3.2.2.jar后，问题就解决了。

json.jsp页面代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%
    	String path = request.getContextPath();
    	String basePath = request.getScheme() + "://"
    			+ request.getServerName() + ":" + request.getServerPort()
    			+ path + "/";
    %>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    
    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
    <script type="text/javascript">
    	$(function(){
    		$('#btn').click(function(){
    			$.post("json.action" , function(data){
    				var html = "" ;
    				for(var i=0;i<data.length;i++) {
    					html += "<tr><td>"+data[i].name+"</td><td>"+data[i].age+"</td></tr>" ;
    				}
    				$('#content').html(html) ;
    			},'json') ;
    		});
    	}) ;
    
    
    </script>
    
    
    </head>
    
    <body>
    	<input type="button" id="btn" value="获取json信息" />
    	<table width="80%" align="center">
    		<tr>
    				<td>姓名</td>
    				<td>年龄</td>
    		</tr>
    		<tbody id="content">
    			
    		</tbody>
    	</table>
    	<br>
    </body>
    </html>

struts.xml配置代码：

<?xml version="1.0" encoding="UTF-8" ?>
    
    <!DOCTYPE struts PUBLIC
        "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
        "http://struts.apache.org/dtds/struts-2.3.dtd">
    
    <struts>
    	<package name="default" namespace="/" extends="json-default">
    		<action name="ajax" class="com.robert.action.AjaxAction">
    		</action>
    		<action name="json" class="com.robert.action.JsonAction">
    			<result type="json">
    				
    				<param name="root">root</param>
    			</result>
    		</action>
    
    	</package>
    </struts>

JsonAction.java中的代码：

package com.robert.action;
    
    import java.util.ArrayList;
    import java.util.List;
    
    import net.sf.json.JSONArray;
    
    import com.opensymphony.xwork2.Action;
    import com.robert.entity.User;
    
    public class JsonAction {
    
    	private JSONArray root;
    	
    	public String execute() {
    		List<User> list = new ArrayList<User>() ;
    		list.add(new User("robert", 20)) ;
    		list.add(new User("jie", 19)) ;
    		list.add(new User("jing", 22)) ;
    		root = JSONArray.fromObject(list) ;
    		System.out.println("root="+root.toString());
    		return Action.SUCCESS ;
    	}
    
    	public JSONArray getRoot() {
    		return root;
    	}
    
    	public void setRoot(JSONArray root) {
    		this.root = root;
    	}
    
    }

User.java代码：

package com.robert.entity;
    
    public class User {
    
    	private String name;
    	private int age;
    	
    	public User(String name, int age) {
    		super();
    		this.name = name;
    		this.age = age;
    	}
    
    	public int getAge() {
    		return age;
    	}
    
    	public void setAge(int age) {
    		this.age = age;
    	}
    
    	public String getName() {
    		return name;
    	}
    
    	public void setName(String name) {
    		this.name = name;
    	}
    
    	
    }

浏览器中输入URL：http://localhost:8080/ajax/json.jsp ， 点击“获取json信息”按钮

![Center 7][]

[Center]: /images/20220613/34640c9ec6664a27aec5be845fad3ddf.png
[Center 1]: /images/20220613/5546e7bcd0e34679af1954d4fb98f41f.png
[Center 2]: /images/20220613/d7ead72cc71a423185556e0c2ea8c307.png
[Center 3]: /images/20220613/b0bd64f98eb64a2e8f11333bc760eb07.png
[Center 4]: /images/20220613/248f47e5b4a647568c1724472f366520.png
[Center 5]: /images/20220613/f30c8dfcf3514e479f27489e4be54996.png
[Center 6]: /images/20220613/5e2441aafe9a4f93a789620586b074bc.png
[Center 7]: /images/20220613/c9eae4f8f4c64cb78adedc3d99d6176f.png