struts2+ajax+json 实例

2、根据struts2的版本,选择jar包。

3、配置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="hr" extends="struts-default" namespace="/">		
		<action name="ajax" class="org.heinrich.action.AjaxAction" method="ajax">
			
		</action>
	</package>
</struts>

无需配置视图

我们需要一个页面,其实ajax很简单,你访问一个请求,我给你返回一个json数据

配置页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.3.2.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax</title>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() { 
	
	$("#ajax").click(
		
	function(){
		alert("dddd");
		$.ajax({
			url: "${pageContext.request.contextPath}/ajax",
			dataType:"json",
			success:function(data){
				alert("name="+data.name+",age="+data.age);
			},
			error:function(){
			alert("aaaa");	
			}
		});
	}
	);
	
	
	}); 

	
	
</script>
<table>
	<tr>
		<td>
			<input type="submit" value="TestAjax" id="ajax">
		</td>
	</tr>
</table>

</body>
</html>

现在重要的Action了

package org.heinrich.action;

import java.io.IOException;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.Action;
import com.opensymphony.xwork2.ActionSupport;

public class AjaxAction extends ActionSupport {


	private static final long serialVersionUID = -2535469033516976065L;
	
	public String ajax() throws IOException{
		
		String json = "{name:'heinrich',age:'10'}";
		HttpServletResponse response = ServletActionContext.getResponse();
        response.setContentType("text/html"); 
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write(json);
		
		return Action.NONE;
	}

}

现在来说一下Ajax的表单提交

package org.heinrich.action;

import java.io.IOException;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.Action;
import com.opensymphony.xwork2.ActionSupport;

public class AjaxAction extends ActionSupport {


	private static final long serialVersionUID = -2535469033516976065L;
	
	
	
	public String submitAjax() throws IOException{
		
		 HttpServletRequest request = ServletActionContext.getRequest();
		 String userName = request.getParameter("userName");
		 String passWord = request.getParameter("passWord");
		 System.out.println("userName"+userName+"  passWord:"+passWord);
		
		 
		 String json = "{name:'heinrich',age:'10'}";
		 
		 	HttpServletResponse response = ServletActionContext.getResponse();
	        response.setContentType("text/html"); 
	        response.setCharacterEncoding("UTF-8");
	        response.getWriter().write(json);
		return Action.NONE;
	}

}

下面是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="hr" extends="struts-default" namespace="/">		

		<action name="submitAjax" class="org.heinrich.action.AjaxAction" method="submitAjax">
			
		</action>
	</package>
</struts>

页面的话大家可以看看

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.3.2.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax</title>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() { 
	
	
	$("#submit").click(function(){
		$.ajax({
	        cache: true,//是否缓存
	        type: "POST",//请求的方式
	        url:"${pageContext.request.contextPath}/submitAjax",
	        data:$("#submitAjax").serialize(),// 你的formid
	        async: false,//是否是异步请求
	        error: function(request) {
	            alert("ARE YOU SDUPID");
	        },
	        success: function(data) {
	        	alert("heheh");
	           alert(data);
	        }
	    });
		
	});
	
	}); 

	
	
</script>

<form id="submitAjax">
	<table align="left" border="1">
		<tr>姓名:<td><input type="text" name="userName"/></td></tr>
		<tr>年龄:<td><input type="text" name="passWord"/></td></tr>
		<tr><input type="submit" value="TestAjax" id="submit"></tr>
	</table>
</form>

</body>
</html>

这样就是一个Ajax的表单提交了

你可能感兴趣的:(实例)