struts2+jQuery+ajax调用演示

最新推荐文章于 2021-08-05 21:35:27 发布

平凡希

最新推荐文章于 2021-08-05 21:35:27 发布

阅读量379

点赞数

关键点：

1.引入包：struts2对数据进行json序列化，必须要用到struts2的json-lib，struts2-json-plugin包；

2.json数据处理：异步提交的数据采用json格式，struts2-json-plugin会对数据进行json处理，所以struts2配置文件struts.xml中的package节点的extends必须是：extends="json-default"；

例如：<package name="default" namespace="/test" extends="json-default">

3.同样的由于返回的是json数据，所以result的类型也必须采用json；

注意：struts2只能在引入json-lib，struts2-json-plugin包时，result的type属性设定json才不会报错：<result name="userInfo" type="json"></result>

4.针对异步提交，action的result节点值应该为空，即不能再转向(例如：只能为<result name="userInfo" type="json"></result>)；

代码：

1. 入口jsp：input_user.jsp

<%@ page contentType="text/html; charset=utf-8" language="java" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title></title>
	<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/modules/user/js/myJs.js"></script>	
	<script type="text/javascript">
		var path="<%=request.getContextPath()%>";
	</script>
</head>
<body>
    <div>
        请输入用户：
    </div>
    <div>
        <form id="subUserForm">
        ID：<input type="text" name="userInfo.id" id="id"/>
        Name：<input type="text" name="userInfo.name" id="name"/>
        </form>
    </div>
    <div>
        <input id="addUser" type="button" value="添加"/>
         <input id="users" type="button" value="所有用户"/>
         <a href="<%=request.getContextPath()%>/test/load_allUser_jump.action">所有用户：非异步方式</a>
         <input id="msg" type="button" value="hello"/>
         <input id="msgUserInfo" type="button" value="userInfo"/>
         <input id="msgUserInfoList" type="button" value="userInfoList"/>
         <input id="msgMap" type="button" value="map"/>
    </div>
    <br/>
	<div id="allUser">
		input_user:
	</div>
</body>
</html>

2. jQuery文件：myJs.js

$(document).ready(function(){

	$("#msg").click(function(){
		$.ajax({
			url:path+'/test/input_user!queryHello',
			type:'POST',
			data:'{}',
			dataType:'json',
			success:function(data){
				$("#allUser").append("输出了："+data.hello);
			}
		})
	})
			
	$("#msgUserInfo").click(function(){
		$.ajax({
			url:path+'/test/userInfo!loadUserInfo',
			type:'POST',
			data:'{}',
			dataType:'json',
			success:function(data){
				$("#allUser").append("<div>输出了：id:" + data.userInfo.id +
					", name: " + data.userInfo.name + "</div>");  
			}
		})
	})
			
	$("#msgUserInfoList").click(function(){
		$.ajax({
			url:path+'/test/userInfoList.action',
			type:'POST',
			data:'{}',
			dataType:'json',
			success:function(data){
				$(data.userList).each(function (i, value) {  
                    $("#allUser").append("<div>输出了：id:" + value.id + ", name: " + value.name + "</div>");  
                });  
            }  
		})
	})
			
	$("#addUser").click(function(){
		//必须先对提交表单数据数据进行序列化，采用jQuery的serialize()方法  
		var params=$("#subUserForm").serialize();
		$.ajax({
			url:path+'/test/add_user.action',
			type:'POST',
			data:params,
			dataType:'json',
			success:function(data){
				$(data.userList).each(function (i, value) {  
                    			$("#allUser").append("<div>输出了：id:" + value.id + ", name: " + value.name + "</div>");  
                			});  
            		}  
		})
	})
			
	$("#users").click(function(){
		$.ajax({
			url:path+'/test/load_allUser.action',
			type:'POST',
			data:'{}',
			dataType:'json',
			success:function(data){
				$(data.userList).each(function (i, value) {  
                    			$("#allUser").append("<div>输出了：id:" + value.id + ", name: " + value.name + "</div>");  
                			});  
            		}  
		})
	})
			
	$("#msgMap").click(function(){
		$.ajax({
			url:path+'/test/load_ByMap.action',
			type:'POST',
			data:'{}',
			dataType:'json',
			success:function(data){
				$("#allUser").append("<div>输出了："+data.resultMap.hello+"</div>"); 
				//alert($(data.resultMap.userList).length);
				$(data.resultMap.userList).each(function (i, value) {  
                   			$("#allUser").append("<div>输出了：id:" + value.id + ", name: " + value.name + "</div>");  
                			});
            		}  
		})
	})			
			
})

3.action类：UserAction.java

package com.lxx.action;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.lxx.model.UserInfo;
import com.opensymphony.xwork2.ActionSupport;

public class UserAction extends ActionSupport{
	
	private String hello;
	private UserInfo userInfo;
	private List<UserInfo> userList;
	private Map resultMap;
	
	public String getHello(){
		return hello;
	}
	
	public void setHello(String hello){
		this.hello=hello;
	}
	
	public UserInfo getUserInfo(){
		return userInfo;
	}
	
	public void setUserInfo(UserInfo userInfo){
		this.userInfo=userInfo;
	}
	
	public List<UserInfo> getUserList(){
		return userList;
	}
	
	public void setUserList(List<UserInfo> userList){
		this.userList=userList;
	}
	
	public Map getResultMap(){
		return resultMap;
	}
	
	public void setResultMap(Map resultMap){
		this.resultMap=resultMap;
	}
	
	public String inputUser() {  
		return "INPUT_USER";  
    } 
	
	public String queryHello() {  
		this.hello = "hello world";  
		return "hel";  
	}
	
	public String loadUserInfo(){
		userInfo=new UserInfo();
		userInfo.setId(1);
		userInfo.setName("lxx");
		return "userInfo";
	}
	
	public String loadUserInfoList(){
		userList=new ArrayList<UserInfo>();
		UserInfo u1=new UserInfo();
		u1.setId(1);
		u1.setName("lxx");
		
		UserInfo u2=new UserInfo();
		u2.setId(2);
		u2.setName("zhangsan");
		
		UserInfo u3=new UserInfo();
		u3.setId(3);
		u3.setName("lisi");
		userList.add(u1);
		userList.add(u2);
		userList.add(u3);
		return "userInfoList";
	}
	
	public String addUser(){
		userList=new ArrayList<UserInfo>();
		userList.add(userInfo);
		return "ADD_SUCCESS";
	}
	
	public String loadAllUser(){
		userList=new ArrayList<UserInfo>();
		UserInfo u1=new UserInfo();
		u1.setId(1);
		u1.setName("lxx");
		
		UserInfo u2=new UserInfo();
		u2.setId(2);
		u2.setName("zhangsan");
		
		UserInfo u3=new UserInfo();
		u3.setId(3);
		u3.setName("lisi");
		userList.add(u1);
		userList.add(u2);
		userList.add(u3);
		return "USER";
	}
	
	public String loadByMap(){
		resultMap=new HashMap();
		resultMap.put("hello", "hello world");
		
		List list=new ArrayList();
		UserInfo u1=new UserInfo();
		u1.setId(1);
		u1.setName("lxx");
		
		UserInfo u2=new UserInfo();
		u2.setId(2);
		u2.setName("zhangsan");
		
		UserInfo u3=new UserInfo();
		u3.setId(3);
		u3.setName("lisi");
		list.add(u1);
		list.add(u2);
		list.add(u3);
		resultMap.put("userList", list);
		return "MAP";
		
	}

}

4.Struts配置文件：struts.xml

<?xml version="1.0" encoding="UTF-8"?>
<!-- 指定Struts 2配置文件的DTD信息 -->
<!DOCTYPE struts PUBLIC
	"-//Apache Software Foundation//DTD Struts Configuration 2.1.7//EN"
	"http://struts.apache.org/dtds/struts-2.1.7.dtd">
<!-- Struts 2配置文件的根元素 -->
<struts>
	<!-- 配置了系列常量 -->
	<!-- struts.i18n.encoding确实用于了HttpServletRequest的setCharacterEncoding()方法 -->
	<constant name="struts.i18n.encoding" value="utf-8"/>	
	<constant name="struts.devMode" value="true"/>	
	 <!-- 与spring集成 -->
	<constant name="struts.objectFactory" value="spring"/>
	
	<!-- 配置默认Action -->
	<package name= "default"  extends= "struts-default" > 
          <default-action-ref name= "defaultAction" ></default-action-ref> 
         <action name= "defaultAction" > 
             <result>/error.jsp </result> 
         </action> 
	</package>   
		
	<!--采用json数据格式，package的extends必须是extends="json-default"-->  
	<!--并且必须要用到struts2的json-lib，struts2-json-plugin包-->  
    	<!--采用异步提交方式，result的type="json"，并且result节点值为空-->  
	<package name="/test"  namespace="/test" extends="json-default">
		<!--客户端请求采用DMI（动态调用）-->  
       		 <action name="input_user" class="com.lxx.action.UserAction">  
            		<result name="INPUT_USER">/modules/user/input_user.jsp</result>  
            		<result name="hel" type="json"></result>  
        		</action>  
		
		<!--客户端请求（非动态调用）-->
        		<action name="userInfo" class="com.lxx.action.UserAction" method="loadUserInfo">
            		<result name="userInfo" type="json"></result>
        		</action>
		
		<action name="userInfoList" class="com.lxx.action.UserAction" method="loadUserInfoList">
            		<result name="userInfoList" type="json"></result>
        		</action>
        
        		<action name="add_user" class="com.lxx.action.UserAction" method="addUser">
            		<result name="ADD_SUCCESS" type="json"></result>
        		</action>
        
        		<action name="load_allUser" class="com.lxx.action.UserAction" method="loadAllUser">
            		<result name="USER" type="json"></result>
        		</action>
        
        		<action name="load_ByMap" class="com.lxx.action.UserAction" method="loadByMap">
            		<result name="MAP" type="json"></result>
        		</action>
        
        		<!--不采用异步提交方式显示-->
        		<action name="load_allUser_jump" class="com.lxx.action.UserAction" method="loadAllUser">
            		<result name="USER">/modules/user/user.jsp</result>
        		</action>
        
		<!-- 定义处理用户请求的Action，指定该Action的实现类-->
		
		<action name="queryRecord" 
			class="com.lxx.action.FMemberAction" method="queryRecord">
			<!-- 为两个逻辑视图配置视图页面 -->
			
			<result name="record" type="json"></result>
		</action>
	
	</package>
</struts>

5.采用非异步提交后转向的jsp：user.jsp

<%@ page contentType="text/html; charset=utf-8" language="java" %>
<%@ taglib uri="/struts-tags" prefix="s" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title></title>
	<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.4.2.min.js"></script>
		
</head>
<body>
	<div id="u">
        <s:iterator value="userList" var="c">
        	<s:property value="#c.id"/> |
        	<s:property value="#c.name"/> |
        	</br>
        </s:iterator>
    </div>
</body>
</html>

6.每个人都知道的应用程序配置文件：web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
  	
  	<!--  加载spring 配置文件 --> 
	<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>classpath*:config/applicationContext.xml</param-value>
	</context-param>
  	
  	
	<!-- 使用ContextLoaderListener初始化Spring容器 -->
	<!--若没有指定其他参数，默认查找的配置文件位置是：/WEB-INF/applicationContext.xml  -->
	<listener>
		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>

	
	<!-- 定义Struts 2的FilterDispathcer的Filter -->
	<filter>
		<filter-name>struts2</filter-name>
		<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
	</filter>
	<!-- FilterDispatcher用来初始化Struts 2并且处理所有的WEB请求。 -->
	<filter-mapping>
		<filter-name>struts2</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>
</web-app>

7.运行效果

平凡希

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
struts2+jQuery+ajax调用演示

关键点：1.引入包：struts2对数据进行json序列化，必须要用到struts2的json-lib，struts2-json-plugin包；2.json数据处理：异步提交的数据采用json格式，struts2-json-plugin会对数据进行json处理，所以struts2配置文件struts.xml中的package节点的extends必须是：extends="json-defa
复制链接

扫一扫