struts2+jquery+ajax实现传输List数据并解析

来源：互联网发布：爱丁堡商学院申请知乎编辑：程序博客网时间：2024/06/08 09:59

上一篇博客，我们提到了如何，利用struts2+jquery+ajax来实现普通json数据的传输，在实际使用中，前台不仅仅显示是逻辑处理后的值。还有从数据库中查询的值，例如hibernate数据库，在查询操作完成后就返回一个List的数据结构，所以，我们需要将List转成json数据类型，并返回到前台，再有JS解析后，显示在页面上。

大部分的代码与上一篇博客的相同，页面也是一个页面

首先建立一个模型类：
Mode.java

package com.action;public class Mode {    String name;    int age;    public String getName() {        return name;    }    public void setName(String name) {        this.name = name;    }    public int getAge() {        return age;    }    public void setAge(int age) {        this.age = age;    }}

模型来封装属性，然后构造该模型的泛型List

接下来是action类
DemoListAction.java

package com.action;import java.util.ArrayList;import java.util.List;import net.sf.json.JSONArray;import com.opensymphony.xwork2.ActionSupport;public class DemoListAction extends ActionSupport {    private String result;    public String getResult() {        return result;    }    public void setResult(String result) {        this.result = result;    }    @Override    public String execute() throws Exception {        // TODO Auto-generated method stub        List<Mode> list = new ArrayList<Mode>();        Mode m1 = new Mode();        m1.setName("oliver");        m1.setAge(18);        Mode m2 = new Mode();        m2.setName("tommy");        m2.setAge(20);        Mode m3 = new Mode();        m3.setName("thea");        m3.setAge(16);        list.add(m1);        list.add(m2);        list.add(m3);        //转成JSONArray        JSONArray jsonArray = JSONArray.fromObject(list);        //转成String类型，这里要解释，虽然后面的param的type是json，但是并不影响实际参数是字符串        result = jsonArray.toString();        return SUCCESS;    }}

看看struts.xml，和上一篇的基本一样，直接去复制上一篇的，加上这一段acion的指向

    <action name="demolistAction" class="com.action.DemoListAction">            <result type="json">                <!-- 这里的result名字对应着action中jsonObject那个，必须有get,set方法 -->                <param name="root">result</param>            </result>        </action>

接下来就是前台页面了
也与上一篇极其类似，只是多了在前台解析这样的json类型
index.jsp

<%@page import="java.text.SimpleDateFormat"%><%@ page language="java" import="java.util.*" pageEncoding="GB18030"%><%@taglib uri="/struts-tags" prefix="s" %><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">    <title>My JSP 'index.jsp' starting page</title>    <meta http-equiv="pragma" content="no-cache">    <meta http-equiv="cache-control" content="no-cache">    <meta http-equiv="expires" content="0">        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="This is my page">    <!--    <link rel="stylesheet" type="text/css" href="styles.css">    -->    <script src="js/jquery.js" type="text/javascript"></script>    <style type="text/css">        .time{            width:300px;            background:#666;        }        .main{            width:300px;            height: 400px;            background: #f60;        }    </style>    <script type="text/javascript">        function btn(){            $.ajax({                //提交方式                type:"post",                //提交的Action                url:"demoAction",                data:{                //提交的数据                    name:$("input[name=name]").val(),                    age:$("input[name=age]").val()                },                //返回数据类型                dataType:"json",                success:function(data){                    //eval()是JS中将JSON的字符串解析成JSON数据格式的一种方法                    var str = JSON.stringify(data);                    var d = eval(data);                    //将解析的de数据放入相应的id中                    //alert(str);                    $("#s_name").text(""+d.name+"");                    $("#s_age").text(""+d.age+"");                },                error:function(data)                {                    //失败的话                    alert("fail");                },            });        }        function btn2(){            $.ajax({                //提交方式                type:"post",                //提交的Action                url:"demolistAction",                data:{                //提交的数据                },                //返回数据类型                dataType:"json",                success:function(data){                    //alert(data);                    var data2 = eval(data);                    for(var i in data2)                    {                        //alert(data2[i].name);                        $("#main").append("<br/>"+data2[i].name+":"+data2[i].age+"");                    }                },                error:function(data)                {                    //失败的话                    alert("fail");                },            });        }    </script>  </head>  <body>    <div class="time" name="time">        <%             SimpleDateFormat fomatter = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");             Date currentTime = new Date();             String str = fomatter.format(currentTime);          %>         <%=str %>    </div>    <form action="#" method = "post">        name:<input type="text" name="name"/>        age:<input type="text" name="age"/>        <input type="button" class="btn" value="submit" onclick="btn()"/>        <input type="button" class="btn" value="submit2" onclick="btn2()"/>    </form>    <div class="main" name="main" id="main">        <span id="s_name">nnnn</span>        <span id="s_age">aaaa</span>    </div>  </body></html>

着重感受一下，怎么解析Json中的list类型数据，也不是很难。
接下来就是运行截图：
这里写图片描述
就循环追加到了相应的div了，学会了这种方法就可以简单的异步显示数据库查到的list了。

0 0