首页 >  JAVA频道 > 技术分享 > 

struts2 + ajax + json的结合使用,实例讲解

struts2 + ajax + json的结合使用,实例讲解

作者:yjl 来源:华育国际 时间:2015-02-27 访问次数:1824
这几天在网上看到好几个朋友发帖问,struts2用response怎么将json值返回到页面javascript解析,这里介绍一个struts2与json整合后包的用法。

这几天在网上看到好几个朋友发帖问,struts2用response怎么将json值返回到页面javas cript解析,这里介绍一个struts2与json整合后包的用法。
1.准备工作
  ①ajax使用Jquery:jquery-1.4.2.min.js    
  ②struts2与json的依赖包:struts2-json-plugin-2.2.3.jar
 PS:版本可自己控制!~
2.过程
①引入json依赖包
②编写action类
③配置struts.xml
④编写页面
⑤测试
3.实例
① action类,JsonAction  注意包名
package com.zxt.action;
import com.opensymphony.xwork2.ActionSupport;
/**
*
* @Title: JsonAction.java
* @Package com.zxt.action
* @Des cription: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返回结果,也可是其他类型的,这里以String类型为例
 */
private String result;
@Override
public String execute() throws Exception {
 // TODO Auto-generated method stub
 if("张三".equals(name)) {
  result = "身份验证通过,身高为" + 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
* @Des cription:json调取结果  
* @param @return    
* @return String
* @throws
 */
public String getResult() {
 return result;
}
}
②struts配置。 struts.xml
创建一个新的package,引入json-default
<package name="ajax" extends="json-default">
     <action name="jsonAjax" class="com.zxt.action.JsonAction">
       <!-- 将返回类型设置为json -->
       <result type="json"></result>
     </action>
   </package>
③ 页面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.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>测试</title>
<s cript type="text/javas cript" src="include/js/jquery-1.4.2.min.js"></s cript>
<s cript type="text/javas cript">
  $(function() {
    $("#tj").click(function() {
   //提交的参数,name和inch是和struts action中对应的接收变量
       var params = {
          name : $("#xm").val(),
          inch : $("#sg").val()
       };
       $.ajax({
   type: "POST",
   url: "jsonAjax.action",
   data: params,
   dataType:"text", //ajax返回值设置为text(json格式也可用它返回,可打印出结果,也可设置成json)
   success: function(json){  
   var obj = $.parseJSON(json);  //使用这个方法解析json
               var state_value = obj.result;  //result是和action中定义的result变量的get方法对应的
   alert(state_value);
   },
   error: function(json){
    alert("json=" + json);
    return false;
   }
   });
    });
  });
</s cript>
</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>
④启动站点,测试吧!~
按这个走完,一切ok。准备测试吧,看看它的强大效果!~O(∩_∩)O~
这只是最简单的一个例子(前后台交互),他能做的工作是非常多的,尽情发挥你的思想和才能吧!~
good luck!
PS:
JQuery解析list的时候可参考,下面的小例子
var data = {"list":[{"id":1,"content":"测试信息1111"},{"id":2,"content":"测试信息2222"}]}
  $.each(data.list, function(i, item) {
     alert(item.id);
     alert(item.content);
  });