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

最新推荐文章于 2021-08-05 19:32:05 发布

转载最新推荐文章于 2021-08-05 19:32:05 发布 · 580 阅读

收藏专栏收录该内容

15 篇文章

订阅专栏

本文提供了一个Struts2、Ajax和JSON结合使用的详细实例教程，包括准备工作、过程步骤、代码实例和测试方法。教程从引入依赖、编写Action类、配置struts.xml文件、编写页面到最终测试，全面展示了如何实现前后端数据交互。

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
* @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

<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>
<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的时候可参考，下面的小例子

var data = {"list":[{"id":1,"content":"测试信息1111"},{"id":2,"content":"测试信息2222"}]}
   $.each(data.list, function(i, item) {
      alert(item.id);
      alert(item.content);
   });