SpringMVC Day05 Ajax-JavaScript

一、学前Demo

1.为controller添加ModelAndView，将原先的JsonResult改为ModelAndView

@RequestMapping("doFindPageSysLog")
    @ResponseBody
    public ModelAndView doFindPageSysLog(String username, Integer pageCurrent){
        PageObject<SysLog> pageObject = sysLogService.findPageObject(username,pageCurrent);
        ModelAndView mv = new ModelAndView();
        mv.addObject("pageObject",pageObject);
        mv.setViewName("jsp/SysLog");//设置指定jsp页面
        return mv;
//  访问：
    }

2.通过JSTL传数据需要添加依赖

   <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>com.springsource.javax.servlet.jsp.jstl</artifactId>
      <version>1.2.0</version>
    </dependency>

3.添加对应jsp页面，修改其内容
在这里插入图片描述

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <title>SysLog-Jsp</title>
</head>
<body>
       <div>
           <table border="1" width="100%" cellpadding="2" cellspacing="0">
               <theand>
                   <tr>
                        <th>id</th>
                        <th>username</th>
                        <th>method</th>
                   </tr>
               </theand>
               <tbody>
                    <c:forEach items="${pageObject.records}" var="itme">
                        <tr>
                            <td>${itme.id}</td>
                            <td>${itme.username}</td>
                            <td>${itme.method}</td>
                        </tr>
                    </c:forEach>
               </tbody>
           </table>
       </div>
</body>
</html>

4.结果
访问：http://localhost:8080/ssmday4/log/doFindPageSysLog?pageCurrent=1
在这里插入图片描述

二、Ajax是什么

web应用程序开发的一种方法，使用客户端脚本与web服务器进行数据交互。由最初的全局页面同步加载升级为异步局部加载刷新方式，动态刷新页面。
优势：局部刷新性能高，速度快。
同步：多个操作顺序执行
异步：多个操作并发执行

Ajax异步
线程多并发，尽量减少客户端的阻塞

三、练习：将查询返回的数据和传递的页面分开

1.在controller中添加方法


//    将查询返回的数据和传递的页面分开
@RequestMapping("doLogListUI")
    public String doLogListUI(){
        return "jsp/SysLog-AJAX";
    }

2.复制SysLog.jsp–>SysLog-AJAX.jsp

 <h1>This is system log list page-Ajax</h1>
       <div>
           <table border="1" width="100%" cellpadding="2" cellspacing="0">
               <theand>
                   <tr>
                        <th>id</th>
                        <th>username</th>
                        <th>method</th>
                   </tr>
               </theand>
           </table>
       </div>

3.运行
访问：http://localhost:8080/ssmday4/log/doLogListUI
结果：
在这里插入图片描述
先提供一个页面。然后局部刷新数据。

提醒：
Spring的入口：new ClassPathXmlApplicationContext(“spring-configs.xml”);
Mybatis的入口：SQLSessionFactoryBuilder、SQLSessionFactory
SpringMVC的入口：dispatcherServlet

4.1修改前端页面实现ajax异步

<script type="text/javascript">
    window.function(){
        doGetObjects();
    }

    function doGetObjects(){
     
    //1.创建ajax对象   是实现ajax的一个入口对象
        var xhr = new XMLHttpRequest();
        console.log("xhr",xhr);//在浏览器的控制台输出一句话
    //2.设置ajax对象的状态监听（响应是否结束）
    //3.建立与服务器的连接
    //4.发送请求

    }
</script>

在这里插入图片描述
若为null，则说明浏览器不支持。换个浏览器。

4.2 继续修改JSP页面

<script type="text/javascript">

    window.function(){
        doGetObjects();
    }

    function doGetObjects(){
    //1.创建ajax对象   是实现ajax的一个入口对象
        var xhr = new XMLHttpRequest();
        console.log(xhr);//在浏览器的控制台输出一句话
    //2.设置ajax对象的状态监听（响应是否结束）
        xhr.onreadystatechange=function(){
        //基于响应状态，处理结果
        //    4.表示服务端响应结束
        //    200.表示服务器响应ok（正确）
            if(xhr.readyState==4&&xhr.status==200){
                console.log(xhr.responseText);  //服务器端返回的结果给xhr
            }
        }
    //3.建立与服务器的连接
        var url = "doFindPageObject?pageCurrent=1";
        xhr.open("Get",url,true);//false表示同步。true表示异步
    //4.发送请求
        xhr.send(null);//get请求此位置不传输局
    }

    
</script>

访问：http://localhost:8080/ssmday4/log/doLogListUI
结果：控制台拿到数据
在这里插入图片描述
4.3将控制台上显示的数据显示到网页页面上
全部jsp页面代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <title>SysLog-Ajax</title>
</head>
<body>

        <h1>This is system log list page-Ajax</h1>
       <div>
           <table border="1" width="100%" cellpadding="2" cellspacing="0">
               <thead>
                   <tr>
                        <th>id</th>
                        <th>username</th>
                        <th>method</th>
                   </tr>
               </thead>

               <tbody id="tbodyId">
                    <tr>
                        <td colspan="3">数据加载中...</td>
                    </tr>
               </tbody>
           </table>
       </div>
<script type="text/javascript">

    //页面加载完成匿名函数
    window.function(){
        doGetObjects();
    }

    function doGetObjects(){
    //1.创建ajax对象   是实现ajax的一个入口对象
        var xhr = new XMLHttpRequest();
        console.log(xhr);//在浏览器的控制台输出一句话
    //2.设置ajax对象的状态监听（响应是否结束）
        xhr.onreadystatechange=function(){
        //基于响应状态，处理结果
        //    4.表示服务端响应结束
        //    200.表示服务器响应ok（正确）
            if(xhr.readyState==4&&xhr.status==200){
                console.log(xhr.responseText);  //服务器端返回的结果给xhr
                doHandleResponseResult(xhr.responseText);
            }
        }
    //3.建立与服务器的连接
        var url = "doFindPageObject?pageCurrent=1";
        xhr.open("Get",url,true);//false表示同步。true表示异步
    //4.发送请求
        xhr.send(null);//get请求此位置不传输局
    }

    function doHandleResponseResult(resultStr){
        //将json格式的字符串转换为json格式的JavaScript对象
        var result = JSON.parse(resultStr);
        console.log(result);
    //    2.处理数据
        if(result.state==1){
            doSetTableBodyRows(result.data.records);
        }else{
            alert(result.message);
        }
    }
    function doSetTableBodyRows(records){
    //    1.获取tbody对象，并清空内容【错点】
        **var tBody=document.getElementById("tbodyId");//按tbody的id查找tbody
        tBody.innerHTML="";**

        //    2.将records数据追加tbody中
        for(var i=0;i<records.length;i++){
        //    一条记录对应一个tr
        //    1.构建tr对象
            var tr = document.createElement("tr");
        //    2.构建多个td对象,追加到tr中
            var td = document.createElement("td");
            td.innerText=records[i].id;
            //  td追加到tr中   tr为父。
            tr.appendChild(td);

            td = document.createElement("td");
            td.innerText=records[i].username;
            tr.appendChild(td);

            td = document.createElement("td");
            td.innerText=records[i].method;
            tr.appendChild(td);

        //    3.将tr追加到tbody中    tbody为父
            tBody.appendChild(tr);
        }
    }
    
</script>
</body>
</html>

访问：http://localhost:8080/ssmday4/log/doLogListUI
结果：在这里插入图片描述

SpringMVC Day05 Ajax-JavaScript

一、学前Demo

二、Ajax是什么

三、练习：将查询返回的数据和传递的页面分开

猜你喜欢