首页 > Java教程 > 正文

这几天在网上看到好几个朋友发帖问,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);
});

以上内容来自于网络,如有侵权联系即删除。

猜你喜欢
发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论信息