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

struts2用response怎么将json值返回到页面javascript解析,这里介绍一个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  注意包名

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
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返回结果,也可是其他类型的,这里以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
  * @Description:json调取结果 
  * @param @return   
  * @return String
  * @throws
   */
  public String getResult() {
   return result;
  }
 
}

 

②struts配置。 struts.xml

创建一个新的package,引入json-default

?
1
2
3
4
5
6
7
< package name = "ajax" extends = "json-default" >
     < action name = "jsonAjax" class = "com.zxt.action.JsonAction" >
 
       <!-- 将返回类型设置为json -->
       < result type = "json" ></ result >
     </ action >
   </ package >

 

③ 页面ajax写法,json.jsp 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<%@ 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>
<script type= "text/javascript" src= "include/js/jquery-1.4.2.min.js" ></script>
<script type= "text/javascript" >
    $( 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 ;
     }
     });
      });
    });
</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>

 

④启动站点,测试吧!~

按这个走完,一切ok。准备测试吧,看看它的强大效果!~O(∩_∩)O~

这只是最简单的一个例子(前后台交互),他能做的工作是非常多的,尽情发挥你的思想和才能吧!~

good luck!

 

 

PS:

JQuery解析list的时候可参考,下面的小例子

?
1
2
3
4
5
var data = { "list" :[{ "id" :1, "content" : "测试信息1111" },{ "id" :2, "content" : "测试信息2222" }]}
   $.each(data.list,  function (i, item) {
      alert(item.id);
      alert(item.content);
   });
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值