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

最新推荐文章于 2021-08-06 14:28:57 发布

oliver233

最新推荐文章于 2021-08-06 14:28:57 发布

阅读量4.8k

点赞数 1

分类专栏： javaweb学习过程文章标签： struts jquery ajax

本文链接：https://blog.csdn.net/oliver233/article/details/71024247

版权

javaweb学习过程专栏收录该内容

14 篇文章 0 订阅

订阅专栏

上一篇博客，我们提到了如何，利用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了。

oliver233

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
struts2+jquery+ajax实现传输List数据并解析

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

扫一扫