ajax asynchronous request Learning (II) ------ display student information collection

Article Directory

A display student information collection
Second, the display student information collection optimization

A display student information collection

Write controller assembly method for a collection of student information

  @ResponseBody
    @RequestMapping("/showlist")
    public List<Student> showlist(){
        List<Student> list=new ArrayList<>();
        Student stu1=new Student("张三",22);
        Student stu2=new Student("李四",21);
        Student stu3=new Student("王五",20);
        Student stu4=new Student("赵六",25);
        list.add(stu1);
        list.add(stu2);
        list.add(stu3);
        list.add(stu4);
        //json数组格式[{},{},{}]
        return list;
    }

Ajax request and write information page

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <title>Title</title>
    <!--导入jQuery函数库-->
    <script src="js/jquery-3.3.1.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
    //发出ajax请求
    //显示学生信息
    function show() {
        $.ajax({
            url:"${pageContext.request.contextPath}/admin/showstu.action",
            type:"post",
            dataType:"json",
            success:function (stu) {
                var s=stu.name+"----------"+stu.age;
                //将学生集合显示在下面的div中
                $("#showStu").html(s);
            },
            error:function (e) {
                alert(e.message);
            }
        });
    }
//显示学生集合
    function showlist() {

        $.ajax({
            url:"${pageContext.request.contextPath}/admin/showlist.action",
            type:"post",
            dataType:"json",
            success:function (list) {
                //[{},{},{}]
                //从返回的json数组中取出一个对象，拼接内容
                var s="";
                for(var i=0;i<list.length;i++){
                    var stu=list[i];
                    s=s+stu.name+"------------"+stu.age+"<br>"
                }
                //将学生集合显示在下面的div中
                $("#showArray").html(s);
            },
            error:function (e) {
                alert(e.message);
            }
        });
    }
</script>
<p><a href="${pageContext.request.contextPath}/admin/showstu.action">显示学生信息（原始方法）</a></p>
<p><a href="javascript:show()">显示学生信息(单个数据)</a></p>
<p><a href="javascript:showlist()">显示学生信息(数据集合)</a></p>
<div id="showStu"></div>
<div id="showArray"></div>
</body>
</html>

operation result

Second, the display student information collection optimization

Optimization of thinking
in order to more easily be refreshed with label style page, it is necessary to request a manner optimized
(1) starts or asynchronous ajax request to the server
(2) to get to the data stored in the session, and then does not carry any data back to requesting location just
success method (3) ajax refresh the display data table (table)
(4) forms an asynchronous refresh just want to re-read the data acquired from the session
Ajax request to write a page of information and write a table style, introducing jstl tag library


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <title>Title</title>
    <!--导入jQuery函数库-->
    <script src="js/jquery-3.3.1.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
    //发出ajax请求
    //显示学生单个信息
    function show() {
        $.ajax({
            url:"${pageContext.request.contextPath}/admin/showstu.action",
            type:"post",
            dataType:"json",
            success:function (stu) {
                var s=stu.name+"----------"+stu.age;
                $("#showStu").html(s);
            },
            error:function (e) {
                alert(e.message);
            }
        });
    }
    //显示学生集合
    function showlist() {

        $.ajax({
            url:"${pageContext.request.contextPath}/admin/showlist.action",
            type:"post",
            dataType:"json",
            success:function (list) {
                //[{},{},{}]
                //从返回的json数组中取出一个对象，拼接内容
                var s="";
                for(var i=0;i<list.length;i++){
                    var stu=list[i];
                    s=s+stu.name+"------------"+stu.age+"<br>"
                }
                //将学生集合显示在下面的div中
                $("#showArray").html(s);
            },
            error:function (e) {
                alert(e.message);
            }
        });
    }
    //显示学生集合（优化）
    function you() {
        $.ajax({
            url:"${pageContext.request.contextPath}/admin/youhua.action",
            type:"post",
            // dataType:"json",
            success:function () {
                //找到显示集合的DIV，进行刷新
                $("#youhua").load(location.href+" #youhua");
            },
            error:function (e) {
                alert(e.message);
            }

        });
    }
</script>
<p><a href="${pageContext.request.contextPath}/admin/showstu.action">显示学生信息（原始方法）</a></p>
<p><a href="javascript:show()">显示学生信息(单个数据)</a></p>
<p><a href="javascript:showlist()">显示学生信息(数据集合)</a></p>
<p><a href="javascript:you()">显示学生信息(优化)</a></p>
<div id="showStu"></div>
<div id="showArray"></div>
<div id="youhua">
<table style="background-color: beige;width: 200px;height: 100px">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <c:forEach items="${list}" var="stu">
        <tr>
            <td>${stu.name}</td>
            <td>${stu.age}</td>
        </tr></c:forEach>
</table></div>
</body>
</html>

Write control module

  @ResponseBody
    @RequestMapping("/youhua")
    public void youhua(HttpSession session){
        List<Student> list=new ArrayList<>();
        Student stu1=new Student("张三",22);
        Student stu2=new Student("李四",21);
        Student stu3=new Student("王五",20);
        Student stu4=new Student("赵六",25);
        //ctrl+d复制当前行
        list.add(stu1);
        list.add(stu2);
        list.add(stu3);
        list.add(stu4);
        //json数组格式[{},{},{}]
        System.out.println(list);
        session.setAttribute("list",list);
        return;
    }

Run shot

Picturesque knows no boundaries

Published 19 original articles · won praise 6 · views 1037

Private letter concerns

ajax asynchronous request Learning (II) ------ display student information collection

Article Directory

A display student information collection

Second, the display student information collection optimization

Guess you like