Struts2+Jquery实现ajax并返回json类型数据

来源：互联网发布：mac电池显示大叉编辑：程序博客网时间：2024/06/10 01:34

转载自：http://www.open-open.com/lib/view/open1371818626400.html

摘要：主要实现步骤如下： 1、JSP页面使用脚本代码执行ajax请求 2、Action中查询出需要返回的数据，并转换为json类型模式数据 3、配置struts.xml文件 4、页面脚本接受并处理数据

网上看到很多关于Struts2+ajax+jquery+json的例子，但是很多都不完整，也看不明白，主要原因是返回jsno类型数据和原来的返回字符串类型数据不一样，并且网友们实现步骤没有说清楚，让初学的朋友捉摸不透到底该怎么做。

我做了个简单的demo，供网友们学习，最后我会附上链接，可以下载整个demo.

首先需要的包（struts核心包和json需要的包）：

struts核心包：

Struts2+Jquery实现ajax并返回json类型数据

json需要的包：

Struts2+Jquery实现ajax并返回json类型数据

commons-logging-*.jar在导入struts核心包的时候就导入了，所以导入json包的时候可以去掉这个包

页面效果：

Struts2+Jquery实现ajax并返回json类型数据

json_demo.jsp页面（该页面引用了jquery文件，我用的版本是jquery-1.8.2.js，如果使用版本不同，请自行修改）：

?
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
68
69
70
71
72
73
74
75
76
77
<%@ 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>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>Simpleton Demo | struts+ajax返回json类型数据</title>
 
<linkrel="shortcut icon" type="image/x-icon"href="images/Icon.png"/>
<linkrel="stylesheet"type="text/css"href="styles/base.css"/>
 
</head>
<bodybackground="images/bg.gif">
     
    <divid="div_json">
        <h5>录入数据</h5>
        <br/>
        <formaction="#"method="post">
            <labelfor="name">姓名：</label><inputtype="text"name="name"/>
            <labelfor="age">年龄：</label><inputtype="text"name="age"/>
            <labelfor="position">职务：</label><inputtype="text"name="position"/>
            <inputtype="button"class="btn"value="提交结果"/>
        </form>
        <br/>
        <h5>显示结果</h5>
        <br/>
        <ul>
            <li>姓名：<spanid="s_name">赞无数据</span></li>
            <liclass="li_layout">年龄：<spanid="s_age">暂无数据</span></li>
            <liclass="li_layout">职务：<spanid="s_position">暂无数据</span></li>
        </ul>
    </div>
     
    <divid="authorgraph"><imgalt=""src="images/autograph.gif"></div>
     
    <scripttype="text/javascript"src="scripts/jquery-1.8.2.js"></script>
    <scripttype="text/javascript">
         
        /* 提交结果，执行ajax */
        function btn(){
             
            var $btn = $("input.btn");//获取按钮元素
            //给按钮绑定点击事件
            $btn.bind("click",function(){
                 
                $.ajax({
                    type:"post",
                    url:"excuteAjaxJsonAction",//需要用来处理ajax请求的action,excuteAjax为处理的方法名，JsonAction为action名
                    data:{//设置数据源
                        name:$("input[name=name]").val(),
                        age:$("input[name=age]").val(),
                        position:$("input[name=position]").val()//这里不要加","  不然会报错，而且根本不会提示错误地方
                    },
                    dataType:"json",//设置需要返回的数据类型
                    success:function(data){
                        var d = eval("("+data+")");//将数据转换成json类型，可以把data用alert()输出出来看看到底是什么样的结构
                        //得到的d是一个形如{"key":"value","key1":"value1"}的数据类型，然后取值出来
                         
                        $("#s_name").text(""+d.name+"");
                        $("#s_age").text(""+d.age+"");
                        $("#s_position").text(""+d.position+"");
                         
                    },
                    error:function(){
                        alert("系统异常，请稍后重试！");
                    }//这里不要加","
                });
            });
        }
     
        /* 页面加载完成，绑定事件 */
        $(document).ready(function(){          
            btn();//点击提交，执行ajax
        });
    </script>
</body>
</html>

JsonAction.java代码

?
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
packagecom.simpleton.demo.action;
 
importjava.util.HashMap;
importjava.util.Map;
 
importjavax.servlet.http.HttpServletRequest;
 
importnet.sf.json.JSONObject;
 
importorg.apache.struts2.interceptor.ServletRequestAware;
 
importcom.opensymphony.xwork2.ActionSupport;
 
publicclass JsonAction extendsActionSupport implementsServletRequestAware{
    privatestatic final long serialVersionUID = 1L;
     
    privateHttpServletRequest request;
    privateString result;
 
    publicvoid setServletRequest(HttpServletRequest arg0) {
        this.request = arg0;
    }
    publicString getResult() {
        returnresult;
    }
    publicvoid setResult(String result) {
        this.result = result;
    }
     
    /**
     * 处理ajax请求
     * @return SUCCESS
     */
    publicString excuteAjax(){
         
        try{
            //获取数据
            String name = request.getParameter("name");
            intage = Integer.parseInt(request.getParameter("age"));
            String position = request.getParameter("position");
             
            //将数据存储在map里，再转换成json类型数据，也可以自己手动构造json类型数据
            Map<String,Object> map = newHashMap<String,Object>();
            map.put("name", name);
            map.put("age",age);
            map.put("position", position);
             
            JSONObject json = JSONObject.fromObject(map);//将map对象转换成json类型数据
            result = json.toString();//给result赋值，传递给页面
        } catch(Exception e) {
            e.printStackTrace();
        }
        returnSUCCESS;
    }
 
 
     
}

struts.xml中

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?xmlversion="1.0"encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.1.7//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
     
    <!--解决乱码    -->
    <constantname="struts.i18n.encoding"value="UTF-8"></constant>
     
    <packagename="simpleton"extends="struts-default,json-default">
         
        <actionname="*JsonAction"method="{1}"class="com.simpleton.demo.action.JsonAction">
            <resultname="fail"></result>
            <!-- 返回json类型数据 -->
            <resulttype="json">
                <paramname="root">result<!-- result是action中设置的变量名，也是页面需要返回的数据，该变量必须有setter和getter方法 --></param>
            </result>
        </action>
         
    </package>
     
</struts>

这样就可以完成一个简单json数据类型传递的demo了。

0 0