首页 > Java教程 > 正文

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

Csyor · 浏览 1473 · 点赞 0 · 评论 0 · 11年前 (2014-01-19)

这几天在网上看到好几个朋友发帖问，struts2用response怎么将json值返回到页面javascript解析，这里介绍一个struts2与json整合后包的用法。

一、准备工作

1、ajax使用Jquery：jquery-1.4.2.min.js

2、struts2与json的依赖包：struts2-json-plugin-2.2.3.jar

二、过程

1、引入json依赖包

2、编写action类

3、配置struts.xml

4、编写页面

5、测试

三、实例

1、action类，JsonAction

import com.opensymphony.xwork2.ActionSupport;

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 {
         if("张三".equals(name)) {
             result = "身份验证通过,身高为" + inch;
         } else{
             result = "不是张三！";
         }
         return SUCCESS;
    }
    //省略get、set方法
}

2、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>

3、页面ajax写法，json.jsp

<%@ 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=ISO-8859-1">
  <title>测试</title>
  <script type="text/javas cript" src="include/js/jquery-1.4.2.min.js"></script>
  <script 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;
        }
      });
    });
  });
  </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>

4、启动站点，测试吧！~

按这个走完，一切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);
});