您的位置：首页 > 编程语言 > Java开发

struts2+ajax+json 实例

2016-01-12 00:00 519 查看

摘要: 项目中想用ajax，于是在网上扒了n多资料，犯了n多错误，从今天上班到现在一直在处理这个问题，终于还是把它解决了。

当我看到页面的ajax显示后，我兴奋异常，为了记录自己学习的ajax历程，也为了让更多的人少走弯路，特写此一文以记之！

废话不说了，为了更好的理解，我重做了一个小的项目，以加深印象。现在就以这个小项目开始我们的ajax之旅。

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的表单提交了

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： struts2+ajax+json 实例

相关文章推荐

新的分享

章节导航