Struts2+Jquery實現ajax并返回json類型數據
摘要： 主要實現步驟如下： 1、JSP頁面使用腳本代碼執行ajax請求 2、Action中查詢出需要返回的數據，并轉換為json類型模式數據 3、配置struts.xml文件 4、頁面腳本接受并處理數據
網上看到很多關于Struts2+ajax+jquery+json的例子，但是很多都不完整，也看不明白，主要原因是返回jsno類型數據和原來的返回字符串類型數據不一樣，并且網友們實現步驟沒有說清楚，讓初學的朋友捉摸不透到底該怎么做。
我做了個簡單的demo，供網友們學習，最后我會附上鏈接，可以下載整個demo.
首先需要的包（struts核心包和json需要的包）：
struts核心包：
json需要的包：
commons-logging-*.jar在導入struts核心包的時候就導入了，所以導入json包的時候可以去掉這個包
頁面效果：
json_demo.jsp頁面（該頁面引用了jquery文件，我用的版本是jquery-1.8.2.js，如果使用版本不同，請自行修改）：
<%@ 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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Simpleton Demo | struts+ajax返回json類型數據</title>
<link rel="shortcut icon" type="image/x-icon" href="images/Icon.png" />
<link rel="stylesheet" type="text/css" href="styles/base.css" />
</head>
<body background="images/bg.gif">
<div id="div_json">
<h5>錄入數據</h5>
<br />
<form action="#" method="post">
<label for="name">姓名：</label><input type="text" name="name" />
<label for="age">年齡：</label><input type="text" name="age" />
<label for="position">職務：</label><input type="text" name="position" />
<input type="button" class="btn" value="提交結果"/>
</form>
<br />
<h5>顯示結果</h5>
<br />
<ul>
<li>姓名：<span id="s_name">贊無數據</span></li>
<li class="li_layout">年齡：<span id="s_age">暫無數據</span></li>
<li class="li_layout">職務：<span id="s_position">暫無數據</span></li>
</ul>
</div>
<div id="authorgraph"><img alt="" src="images/autograph.gif"></div>
<script type="text/javascript" src="scripts/jquery-1.8.2.js"></script>
<script type="text/javascript">
/* 提交結果，執行ajax */
function btn(){
var $btn = $("input.btn");//獲取按鈕元素
//給按鈕綁定點擊事件
$btn.bind("click",function(){
$.ajax({
type:"post",
url:"excuteAjaxJsonAction",//需要用來處理ajax請求的action,excuteAjax為處理的方法名，JsonAction為action名
data:{//設置數據源
name:$("input[name=name]").val(),
age:$("input[name=age]").val(),
position:$("input[name=position]").val()//這里不要加"," 不然會報錯，而且根本不會提示錯誤地方
},
dataType:"json",//設置需要返回的數據類型
success:function(data){
var d = eval("("+data+")");//將數據轉換成json類型，可以把data用alert()輸出出來看看到底是什么樣的結構
//得到的d是一個形如{"key":"value","key1":"value1"}的數據類型，然后取值出來
$("#s_name").text(""+d.name+"");
$("#s_age").text(""+d.age+"");
$("#s_position").text(""+d.position+"");
},
error:function(){
alert("系統異常，請稍后重試！");
}//這里不要加","
});
});
}
/* 頁面加載完成，綁定事件 */
$(document).ready(function(){
btn();//點擊提交，執行ajax
});
</script>
</body>
</html> JsonAction.java代碼
package com.simpleton.demo.action;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import net.sf.json.JSONObject;
import org.apache.struts2.interceptor.ServletRequestAware;
import com.opensymphony.xwork2.ActionSupport;
public class JsonAction extends ActionSupport implements ServletRequestAware{
private static final long serialVersionUID = 1L;
private HttpServletRequest request;
private String result;
public void setServletRequest(HttpServletRequest arg0) {
this.request = arg0;
}
public String getResult() {
return result;
}
public void setResult(String result) {
this.result = result;
}
/**
* 處理ajax請求
* @return SUCCESS
*/
public String excuteAjax(){
try {
//獲取數據
String name = request.getParameter("name");
int age = Integer.parseInt(request.getParameter("age"));
String position = request.getParameter("position");
//將數據存儲在map里，再轉換成json類型數據，也可以自己手動構造json類型數據
Map<String,Object> map = new HashMap<String,Object>();
map.put("name", name);
map.put("age",age);
map.put("position", position);
JSONObject json = JSONObject.fromObject(map);//將map對象轉換成json類型數據
result = json.toString();//給result賦值，傳遞給頁面
} catch (Exception e) {
e.printStackTrace();
}
return SUCCESS;
}
} struts.xml中
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.1.7//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<!--解決亂碼 -->
<constant name="struts.i18n.encoding" value="UTF-8"></constant>
<package name="simpleton" extends="struts-default,json-default">
<action name="*JsonAction" method="{1}" class="com.simpleton.demo.action.JsonAction">
<result name="fail"></result>
<!-- 返回json類型數據 -->
<result type="json">
<param name="root">result<!-- result是action中設置的變量名，也是頁面需要返回的數據，該變量必須有setter和getter方法 --></param>
</result>
</action>
</package>
</struts> 這樣就可以完成一個簡單json數據類型傳遞的demo了。
下面附上源碼文件（百度網盤），基于eclipse開發，導入即可運行：http://pan.baidu.com/share/link?shareid=2994183962&uk=1646424500
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！