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

上一篇博客,我们提到了如何,利用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 list = new ArrayList();
        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">
                
                <param name="root">resultparam>
            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+"/";
%>


<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'index.jsp' starting pagetitle>
    <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">
    
    <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("
"
+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">nnnnspan> <span id="s_age">aaaaspan> div> body> html>

着重感受一下,怎么解析Json中的list类型数据,也不是很难。
接下来就是运行截图:
struts2+jquery+ajax实现传输List数据并解析_第1张图片
就循环追加到了相应的div了,学会了这种方法就可以简单的异步显示数据库查到的list了。

你可能感兴趣的:(javaweb学习过程)