《SSM笔记——SpringMVC》8、Ajax技术_ssm中什么是ajax-优快云博客

本文链接：https://blog.youkuaiyun.com/a602389093/article/details/114502709

8、Ajax技术

作者：ExcelMann，转载需注明。

8.1、介绍

异步无刷新请求。

学习文章：

狂神说SpringMVC07：Ajax研究

JQuery是一个库，不是一个框架，里面包含有大量的JS函数。

JQuery Ajax本质就是 XMLHttpRequest，对他进行了封装，方便调用！

jQuery.ajax(...)
	  //主要记得url、data、success、error

      部分参数：
            url：请求地址
            type：请求方式，GET、POST（1.9.0之后用method）
        headers：请求头
            data：要发送的数据
    contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
          async：是否异步
        timeout：设置请求超时时间（毫秒）
      beforeSend：发送请求前执行的函数(全局)
        complete：完成之后执行的回调函数(全局)
        success：成功之后执行的回调函数(全局)
          error：失败之后执行的回调函数(全局)
        accepts：通过请求头发送给服务器，告诉服务器当前客户端可接受的数据类型
        dataType：将服务器端返回的数据转换成指定类型
          "xml": 将服务器端返回的内容转换成xml格式
          "text": 将服务器端返回的内容转换成普通文本格式
          "html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
        "script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
          "json": 将服务器端返回的内容转换成相应的JavaScript对象
        "jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数

对于后端人员来说，需要会的前端知识：

HTML+css	略懂
js：
 - 函数：闭包
 - Dom操作
 - Bom操作等

小结：

Ajax就是将后端转发页面的主动权，移交到前端的Ajax来处理。

后端的接口，只是一个处理数据，返回数据的功能。
在这里插入图片描述

8.2、实现简单的Ajax

开发步骤：

配置SpringMVC的配置文件；
- 开启注解驱动
- 记得加上：静态资源默认servlet处理

编写一个AjaxController，准备接受Ajax的请求，并且返回数据

//采用response的方式回应数据
@RequestMapping("/t2")
public void test2(String name, HttpServletResponse response) throws IOException {
    if("excelman".equals(name)){
        response.getWriter().print("true");
    }else{
        response.getWriter().print("false");
    }
}

编写前端页面

导入JQuery，可以导入在线的CDN，或者下载后导入
编写页面测试

<script>
    function t1(){
        $.post({
            url:"${pageContext.request.contextPath}/t2",
            data:{'name':$("#txtName").val()},
            success:function (data,status) {
                alert(data);
                alert(status);
            }
        });
    }
</script>

8.3、采用SpringMVC的方式实现Ajax回显List数据

开发步骤：

首先新建一个实体类User，在接口中，尝试返回一个集合对象，里面装有多个User；

@RequestMapping("/a2")
public List<User> ajax2(){
   List<User> list = new ArrayList<User>();
   list.add(new User("秦疆1号",3,"男"));
   list.add(new User("秦疆2号",3,"男"));
   list.add(new User("秦疆3号",3,"男"));
   return list; //由于@RestController注解，将list转成json格式返回
}

编写前端页面，实现数据回显

<script>
$(function () {
       $("#btn").click(function () {
           
			//post也是ajax的其中一种实现方式，且url和function回调函数可以写在参数中（data参数可以省略）
           
           $.post("${pageContext.request.contextPath}/a2",function (data) {
               console.log(data);
               var html="";
               for (var i = 0; i <data.length ; i++) {
                   html+= "<tr>" +
                       "<td>" + data[i].name + "</td>" +
                       "<td>" + data[i].age + "</td>" +
                       "<td>" + data[i].sex + "</td>" +
                       "</tr>"
              }
               $("#content").html(html);
          });
      })
  })
    
</script>

8.4、采用Ajax实现注册提示的效果

编写一个Controller

@RequestMapping("/a3")
public String ajax3(String name,String pwd){
   String msg = "";
   //模拟数据库中存在数据
   if (name!=null){
       if ("admin".equals(name)){
           msg = "OK";
      }else {
           msg = "用户名输入错误";
      }
  }
   if (pwd!=null){
       if ("123456".equals(pwd)){
           msg = "OK";
      }else {
           msg = "密码输入有误";
      }
  }
   return msg; //由于@RestController注解，将msg转成json格式返回
}

编写前端jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
   <title>ajax</title>
   <script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>
   <script>

       function a1(){
           $.post({
               url:"${pageContext.request.contextPath}/a3",
               data:{'name':$("#name").val()},
               success:function (data) {
                   if (data.toString()=='OK'){
                       $("#userInfo").css("color","green");
                  }else {
                       $("#userInfo").css("color","red");
                  }
                   $("#userInfo").html(data);
              }
          });
      }
       function a2(){
           $.post({
               url:"${pageContext.request.contextPath}/a3",
               data:{'pwd':$("#pwd").val()},
               success:function (data) {
                   if (data.toString()=='OK'){
                       $("#pwdInfo").css("color","green");
                  }else {
                       $("#pwdInfo").css("color","red");
                  }
                   $("#pwdInfo").html(data);
              }
          });
      }

   </script>
</head>
<body>
<p>
  用户名:<input type="text" id="name" οnblur="a1()"/>
   <span id="userInfo"></span>
</p>
<p>
  密码:<input type="text" id="pwd" οnblur="a2()"/>
   <span id="pwdInfo"></span>
</p>
</body>
</html>

踩的坑的总结：