【WEEK4】 【DAY5】AJAX第二部分【中文版】

2401_833291432024-03-27 17:59

2024.3.22 Friday

接上文【WEEK4】 【DAY4】AJAX第一部分【中文版】

目录

8.4.Ajax异步加载数据

8.4.1.新建User.java

java 复制代码 
package P24.project;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private String name;
    private int age;
    private String gender;
}

8.4.2.在pom.xml中添加lombok、jackson支持

xml 复制代码 
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <artifactId>SpringMVC_try1</artifactId>
        <groupId>com.kuang</groupId>
        <version>1.0-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <groupId>P24</groupId>
    <artifactId>springmvc-06-ajax</artifactId>

    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.24</version>
        </dependency>

        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.15.2</version>
        </dependency>
    </dependencies>

</project>

8.4.3.更改tomcat设置

初始情况下Application context的默认值为/springmvc_06_ajax_war_exploded，可以修改为/，简化url。

8.4.4.修改AjaxController.java

java 复制代码 
package P24.controller;

import P24.project.User;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

//不返回到视图解析器
@RestController
public class AjaxController {
    @RequestMapping("/t1")
    public String test(){
        return "hello";
    }

    @RequestMapping("/a1")
    public void a(String name, HttpServletResponse response) throws IOException {
        System.out.println("a1:param=>"+name);
        if ("zzz".equals(name)){
            response.getWriter().print("true");
        }else {
            response.getWriter().print("false");
        }
    }

    @RequestMapping("/a2")
    public List<User> a2(){
        List<User> userList = new ArrayList<User>();
        //添加数据
        userList.add(new User("zhangsan",11,"male"));
        userList.add(new User("lisi",22,"female"));
        userList.add(new User("wangwu",33,"male"));

        return userList;
    }
}

8.4.5.新建test2.jsp

8.4.5.1.注意：和WEB-INF平级！

否则无法通过更改url访问jsp文件！（如下图）将出现404的问题【因为位置错误导致的404找了几乎一天，实际上只需要在创建时注意好即可！】

如果无意之间把test2.jsp放在了WEB-INF/jsp目录下其实也可以访问（不推荐），步骤如下：

  1. 修改AjaxController.jsp，将代码改为使用视图解析器的方式
  2. 创建方法t2访问test2，此时，通过视图解析器即可访问到WEB-INF/jsp/test2.jsp
java 复制代码 
package P24.controller;

import P24.project.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

@Controller //会返回到视图解析器
//@RestController   //不返回到视图解析器

//    如果需要从控制器访问test2.jsp，则需要使用applicationContext.xml中的视图解析器
//    在此情况下，最外层AjaxController方法需要使用@Controller注释
    @GetMapping("/t2")
    public String t2(){
        return "/WEB-INF/test2.jsp";
    }
}
  1. 其他方式可参考以下链接进行修改，注意idea项目 的真实保存地址，不能在tomcat的保存地址进行操作（更不推荐，个人觉得很繁琐）
    https://www.cnblogs.com/jet-angle/p/11477297.html
    https://www.cnblogs.com/atsong/p/13118155.html

8.4.5.2.验证点击事件

xml 复制代码 
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
  <script src="${pageContext.request.contextPath}/statics/js/jquery-3.7.1.js"></script>

  <script>
    $(function () {
      $("#btn").click(function (){
        console.log("test2");
      })
    });

  </script>
</head>

<body>
<%--先获取事件--%>
<input type="button" value="加载数据" id="btn">
<%--用table展示页面--%>
<table>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>性别</td>
  </tr>
  <tbody>
  <%--数据在后台，无法直接获取，所以需要使用"请求"--%>
  </tbody>
</table>
</body>
</html>

http://localhost:8080/springmvc_06_ajax_war_exploded/test2.jsp

F12加载出console页，然后点击"加载数据"即可看到console.log("test2");被运行，输出"test2"

8.4.5.3.输出userList的内容

只需要将上一步的function进行修改

xml 复制代码 
  <script>
    $(function () {
      $("#btn").click(function (){
        //$.post(url, param[可省略], success)
        $.post("${pageContext.request.contextPath}/a2",function(data){
          console.log(data);
        })
      })
    });

  </script>

http://localhost:8080/springmvc_06_ajax_war_exploded/test2.jsp

8.4.5.4.修改JavaScript版本

如图，目前一般都是默认6+

8.4.5.5.再修改test2.jsp，使userList直接在网页上显示

xml 复制代码 
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
  <script src="${pageContext.request.contextPath}/statics/js/jquery-3.7.1.js"></script>

  <script>
    $(function () {
      $("#btn").click(function (){
        //$.post(url, param[可省略], success)
        $.post("${pageContext.request.contextPath}/a2",function(data){
          // console.log(data);
          var html="";
          for (let 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); //将var html="<>";中的元素放入这行
        });

      })
    });

  </script>
</head>

<body>
<%--先获取事件--%>
<input type="button" value="加载数据" id="btn">
<%--用table展示页面--%>
<table>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>性别</td>
  </tr>
  <tbody id="content">
  <%--数据在后台，无法直接获取，所以需要使用"请求"--%>
  </tbody>
</table>
</body>
</html>

8.4.6.运行

http://localhost:8080/springmvc_06_ajax_war_exploded/test2.jsp

8.5.Ajax验证用户名体验

8.5.1.修改AjaxController.java

java 复制代码 
package P24.controller;

import P24.project.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

//@Controller //会返回到视图解析器
@RestController   //不返回到视图解析器
public class AjaxController {
    @RequestMapping("/t1")
    public String test(){
        return "hello";
    }

//    如果需要从控制器访问test2.jsp，则需要使用applicationContext.xml中的视图解析器
//    在此情况下，最外层AjaxController方法需要使用@Controller注释
//    @GetMapping("/t2")
//    public String t2(){
//        return "/WEB-INF/test2.jsp";
//    }

    @RequestMapping("/a1")
    public void a(String name, HttpServletResponse response) throws IOException {
        System.out.println("a1:param=>"+name);
        if ("zzz".equals(name)){
            response.getWriter().print("true");
        }else {
            response.getWriter().print("false");
        }
    }

    @RequestMapping("/a2")
    public List<User> a2(){
        List<User> userList = new ArrayList<User>();
        //添加数据
        userList.add(new User("zhangsan",11,"male"));
        userList.add(new User("lisi",22,"female"));
        userList.add(new User("wangwu",33,"male"));

        return userList;
    }

    @RequestMapping("/a3")
    public String a3(String name, String pwd){
        String msg = "";
        if (name != null){
            //admin这些数据应该在数据库中
            if ("admin".equals(name)){
                msg = "Accepted";
            }else {
                msg = "name have an error";
            }
        }
        if (pwd != null){
            //123456这些数据应该在数据库中
            if ("123456".equals(pwd)){
                msg = "Accepted";
            }else {
                msg = "password has an error";
            }
        }
        return msg;
    }
}

8.5.2.新建login.jsp

xml 复制代码 
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
  <script src="${pageContext.request.contextPath}/statics/js/jquery-3.7.1.js"></script>

  <script>
    function a1(){
      $.post({
        url:"${pageContext.request.contextPath}/a3",
        data:{'name':$("#name").val()},
        success:function (data) {
          if (data.toString()=='Accepted'){
            $("#userInfo").css("color","green");
          }else {
            $("#userInfo").css("color","red");
          }
          $("#userInfo").html(data);  //在网页上打印出data
        }
      });
    }

    function a2() {
      $.post({
        url:"${pageContext.request.contextPath}/a3",
        data:{'pwd':$("#pwd").val()},
        success:function (data) {
          if (data.toString()=='Accepted'){
            $("#pwdInfo").css("color","green");
          }else {
            $("#pwdInfo").css("color","red");
          }
          $("#pwdInfo").html(data);
        }
      });
    }
  </script>
</head>
<body>

<p>
<%--  失去焦点--%>
  用户名: <input type="text" id="name" onblur="a1()">
<%--  提示信息--%>
  <span id="userInfo"></span>
</p>
<p>
  密码: <input type="text" id="pwd" onblur="a2()">
  <span id="pwdInfo"></span>
</p>

</body>
</html>

8.5.3.运行

http://localhost:8080/springmvc_06_ajax_war_exploded/login.jsp

8.6.获取百度接口demo

html 复制代码 
<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>JSONP百度搜索</title>
  <style>
    #q{
      width: 500px;
      height: 30px;
      border:1px solid #ddd;
      line-height: 30px;
      display: block;
      margin: 0 auto;
      padding: 0 10px;
      font-size: 14px;
    }
    #ul{
      width: 520px;
      list-style: none;
      margin: 0 auto;
      padding: 0;
      border:1px solid #ddd;
      margin-top: -1px;
      display: none;
    }
    #ul li{
      line-height: 30px;
      padding: 0 10px;
    }
    #ul li:hover{
      background-color: #f60;
      color: #fff;
    }
  </style>
  <script>

    // 2.步骤二
    // 定义demo函数 (分析接口、数据)
    function demo(data){
      var Ul = document.getElementById('ul');
      var html = '';
      // 如果搜索数据存在 把内容添加进去
      if (data.s.length) {
        // 隐藏掉的ul显示出来
        Ul.style.display = 'block';
        // 搜索到的数据循环追加到li里
        for(var i = 0;i<data.s.length;i++){
          html += '<li>'+data.s[i]+'</li>';
        }
        // 循环的li写入ul
        Ul.innerHTML = html;
      }
    }

    // 1.步骤一
    window.onload = function(){
      // 获取输入框和ul
      var Q = document.getElementById('q');
      var Ul = document.getElementById('ul');

      // 事件鼠标抬起时候
      Q.onkeyup = function(){
        // 如果输入框不等于空
        if (this.value != '') {
          // ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆JSONPz重点☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
          // 创建标签
          var script = document.createElement('script');
          //给定要跨域的地址 赋值给src
          //这里是要请求的跨域的地址 我写的是百度搜索的跨域地址
          script.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.value+'&cb=demo';
          // 将组合好的带src的script标签追加到body里
          document.body.appendChild(script);
        }
      }
    }
  </script>
</head>

<body>
<input type="text" id="q" />
<ul id="ul">

</ul>
</body>
</html>
相关推荐
崔庆才丨静觅17 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby606118 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了18 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅18 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅19 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅19 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment19 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅19 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊19 小时前
jwt介绍
前端
爱敲代码的小鱼19 小时前
AJAX（异步交互的技术来实现从服务端中获取数据）：
前端·javascript·ajax
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南06Linux下V2Ray安装配置指南07openclaw使用nginx反代部署过程 与disconnected (1008): pairing required解决08Claude Code Skills 实用使用手册09在Trae中使用Pencil MCP10Vue-skills的中文文档