這幾天在網(wǎng)上看到好幾個(gè)朋友發(fā)帖問(wèn),,struts2用response怎么將json值返回到頁(yè)面javascript解析,,這里介紹一個(gè)struts2與json整合后包的用法。
1.準(zhǔn)備工作
①ajax使用Jquery:jquery-1.4.2.min.js
②struts2與json的依賴包:struts2-json-plugin-2.2.3.jar
PS:版本可自己控制,!~
2.過(guò)程
①引入json依賴包
②編寫action類
③配置struts.xml
④編寫頁(yè)面
⑤測(cè)試
3.實(shí)例
① action類,,JsonAction 注意包名
package com.zxt.action;
import com.opensymphony.xwork2.ActionSupport;
/**
*
* @Title: JsonAction.java
* @Package com.zxt.action
* @Description:struts2 + ajax + json用例
* @author zxt
* @date 2011-12-6 上午10:38:51
* @version V1.0
*/
public class JsonAction extends ActionSupport {
/**
*
*/
private static final long serialVersionUID = 7443363719737618408L;
/**
* 姓名
*/
private String name;
/**
* 身高
*/
private String inch;
/**
* ajax返回結(jié)果,也可是其他類型的,,這里以String類型為例
*/
private String result;
@Override
public String execute() throws Exception {
// TODO Auto-generated method stub
if("張三".equals(name)) {
result = "身份驗(yàn)證通過(guò),身高為" + inch;
} else
result = "不是張三,!";
return SUCCESS;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getInch() {
return inch;
}
public void setInch(String inch) {
this.inch = inch;
}
/**
*
* @Title: getResult
* @Description:json調(diào)取結(jié)果
* @param @return
* @return String
* @throws
*/
public String getResult() {
return result;
}
}
②struts配置。 struts.xml
創(chuàng)建一個(gè)新的package,,引入json-default
<package name="ajax" extends="json-default">
<action name="jsonAjax" class="com.zxt.action.JsonAction">
<!-- 將返回類型設(shè)置為json -->
<result type="json"></result>
</action>
</package>
③ 頁(yè)面ajax寫法,,json.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" 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" "http://www./TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>測(cè)試</title>
<script type="text/javascript" src="include/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function() {
$("#tj").click(function() {
//提交的參數(shù),name和inch是和struts action中對(duì)應(yīng)的接收變量
var params = {
name : $("#xm").val(),
inch : $("#sg").val()
};
$.ajax({
type: "POST",
url: "jsonAjax.action",
data: params,
dataType:"text", //ajax返回值設(shè)置為text(json格式也可用它返回,,可打印出結(jié)果,,也可設(shè)置成json)
success: function(json){
var obj = $.parseJSON(json); //使用這個(gè)方法解析json
var state_value = obj.result; //result是和action中定義的result變量的get方法對(duì)應(yīng)的
alert(state_value);
},
error: function(json){
alert("json=" + json);
return false;
}
});
});
});
</script>
</head>
<body>
<span>姓名:</span><input id="xm" type="text">
<br/>
<span>身高:</span><input id="sg" type="text">
<br/>
<input type="button" value="提交" id="tj">
</body>
</html>
④啟動(dòng)站點(diǎn),,測(cè)試吧!~
按這個(gè)走完,,一切ok,。準(zhǔn)備測(cè)試吧,看看它的強(qiáng)大效果,!~O(∩_∩)O~
這只是最簡(jiǎn)單的一個(gè)例子(前后臺(tái)交互),,他能做的工作是非常多的,盡情發(fā)揮你的思想和才能吧,!~
good luck,!
PS:
JQuery解析list的時(shí)候可參考,下面的小例子
var data = {"list":[{"id":1,"content":"測(cè)試信息1111"},{"id":2,"content":"測(cè)試信息2222"}]}
$.each(data.list, function(i, item) {
alert(item.id);
alert(item.content);
});