struts2中使用ajax

为了写一个struts2配合使用的ajax，的确是花了不少心思，总是提出各种各样的问题，究其原因是——包冲突；因为自己配置的jar是很久以前的，所以很多包都不支持，因此自己在网上下载了最新想版本 struts-2.3.7，将需要的包放在附件中，废话不多说了，开始整理ajax吧

<?xml version="1.0" encoding="GBK"?>
<!DOCTYPE struts PUBLIC

  "-//Apache Software Foundation//DTD Struts Configuration 2.0 //EN"
  "resources/struts-2.1.7.dtd">

<struts>
	<constant name="struts.i18n.encoding" value="utf-8"></constant>
	<constant name="struts.multipart.maxSize" value="10000000" />
	
	
	<package name="ajax" extends="json-default">
	
		<action name="ajaxTest" class="ajaxTestSpring">
			<result name="success" type="json"></result>
		</action>
	
	</package>
	
	
</struts>

在spring中配置对应的处理action类

<!-- 测试使用的ajax -->
	<bean id="ajaxTestSpring" class="hb.ajax.AjaxTest"></bean>

前端发送ajax请求

<%@ 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 'ajax.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">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="<%=basePath%>js/util/jquery-1.4.4.js"></script>
  </head>
  
  <body>
    <button onclick="test1()">ajax简单入门</button><br>
    <button onclick="test2()">ajax 接受对象</button><br>
    <button onclick="test3()">ajax 接受多个对象</button><br>
  </body>
</html>
<script>

function test1(){
	$.ajax({
		type:"post",
		url:"<%=basePath%>ajaxTest.action",
		data: "name=John&location=Boston",
		success:function(data){
			alert(data.name);
		},
		error:function(){
			alert("error");
		}
	});
}

function test2(){
	$.ajax({
		type:"post",
		url:"<%=basePath%>ajaxTest.action",
		data: "name=Johns&location=Boston",
		success:function(data){
			alert(data.name);
			alert(data.person.password);
		},
		error:function(){
			alert("error");
		}
	});
}

function test3(){
	$.ajax({
		type:"post",
		url:"<%=basePath%>ajaxTest.action",
		data: "name=Johnlist&location=Boston",
		success:function(data){
			alert(data.persons[1].password);
		},
		error:function(){
			alert("error");
		}
	});
}

</script>

对应的java处理类

package hb.ajax;

import java.util.Date;
import java.util.LinkedList;
import java.util.List;

import hb.person.model.Person;

import com.opensymphony.xwork2.ActionSupport;

public class AjaxTest extends ActionSupport{

	String name;
	Person person;
	List<Person> persons;
	
	public List<Person> getPersons() {
		return persons;
	}
	public Person getPerson() {
		return person;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}

	@Override
	public String execute() throws Exception {
		System.out.println(this.name);
		if(this.name.equals("John")){
			this.name="ajax 测试成功";
		}
		if(this.name.equals("Johns")){
			this.name="ajax 测试成功";
			this.person = new Person();
			person.setAge(12);
			person.setBirthday(new Date());
			person.setName("测试ajax");
			person.setPassword("我是密码");
		}
		if(this.name.equals("Johnlist")){
			this.name="ajax 测试成功";
			Person person1 = new Person();
			person1.setAge(12);
			person1.setBirthday(new Date());
			person1.setName("测试ajax");
			person1.setPassword("我是密码");
			
			Person person2 = new Person();
			person2.setAge(122);
			person2.setBirthday(new Date());
			person2.setName("测试ajax2");
			person2.setPassword("我是密码2");
			
			this.persons = new LinkedList<Person>();
			persons.add(person1);
			persons.add(person2);
		}
		return "success";
	}
	
}

备注：对应的action中的属性需要有get方法，这样才能保证前端得到对应的json数据，三个ajax分别json内容

1、{"name":"ajax 测试成功"}

2、{"name":"ajax 测试成功","person":{"age":12,"birthday":当前时间toString,"name":"测试ajax","password":"我是密码"}}

3、{"name":"ajax 测试成功","persons":[{"age":12,"birthday":当前时间toString,"name":"测试ajax","password":"我是密码"},{"age":122,"birthday":当前时间toString,"name":"测试ajax2","password":"我是密码2"}]}

猜你喜欢