【WEEK4】 【DAY5】AJAX - Part Two【English Version】

2024.3.22 Friday

Following the previous article 【WEEK4】 【DAY4】AJAX - Part One【English Version】

Contents

  • [8.4. Ajax Asynchronous Data Loading](#8.4. Ajax Asynchronous Data Loading)
    • [8.4.1. Create User.java](#8.4.1. Create User.java)
    • [8.4.2. Add lombok and jackson support in pom.xml](#8.4.2. Add lombok and jackson support in pom.xml)
    • [8.4.3. Change Tomcat Settings](#8.4.3. Change Tomcat Settings)
    • [8.4.4. Modify AjaxController.java](#8.4.4. Modify AjaxController.java)
    • [8.4.5. Create test2.jsp](#8.4.5. Create test2.jsp)
      • [8.4.5.1. Note: At the same level as WEB-INF!](#8.4.5.1. Note: At the same level as WEB-INF!)
      • [8.4.5.2. Verify Click Event](#8.4.5.2. Verify Click Event)
      • [8.4.5.3. Output the Content of userList](#8.4.5.3. Output the Content of userList)
      • [8.4.5.4. Update the JavaScript Version](#8.4.5.4. Update the JavaScript Version)
      • [8.4.5.5. Further Modify test2.jsp to Directly Display userList on the Web Page](#8.4.5.5. Further Modify test2.jsp to Directly Display userList on the Web Page)
    • [8.4.6. Run](#8.4.6. Run)
  • [8.5. Ajax Username Verification Experience](#8.5. Ajax Username Verification Experience)
    • [8.5.1. Modify AjaxController.java](#8.5.1. Modify AjaxController.java)
    • [8.5.2. Create login.jsp](#8.5.2. Create login.jsp)
    • [8.5.3. Run](#8.5.3. Run)

8.4. Ajax Asynchronous Data Loading

8.4.1. Create 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. Add lombok and jackson support in pom.xml

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. Change Tomcat Settings

Initially, the default value of Application context is /springmvc_06_ajax_war_exploded, it can be changed to / to simplify the URL.

8.4.4. Modify 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;

//Does not return to view resolver
@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>();
        //Adding data
        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. Create test2.jsp

8.4.5.1. Note: At the same level as WEB-INF!

Otherwise, the jsp file cannot be accessed by changing the URL! (As shown below) A 404 error will appear due to incorrect placement, which took almost a day to find, but in reality, it just needs to be correctly positioned at creation!

If test2.jsp is unintentionally placed under the WEB-INF/jsp directory, it can still be accessed (not recommended), with the following steps:

  1. Modify AjaxController.jsp to use the view resolver approach.
  2. Create method t2 to access test2, at this time, it can be accessed through the view resolver to 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 //Will return to view resolver
//@RestController   //Does not return to view resolver

//    If you need to access test2.jsp from the controller, you need to use the view resolver in applicationContext.xml
//    In this case, the outermost AjaxController method needs to use the @Controller annotation
    @GetMapping("/t2")
    public String t2(){
        return "/WEB-INF/test2.jsp";
    }
}
  1. For other methods, refer to the following links for modifications, and be aware of the real save location of the idea project, do not operate on the save location of tomcat (even less recommended, personally think it's very cumbersome )
    https://www.cnblogs.com/jet-angle/p/11477297.html
    https://www.cnblogs.com/atsong/p/13118155.html

8.4.5.2. Verify Click Event

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>
<%--First capture the event--%>
<input type="button" value="Load Data" id="btn">
<%--Display with a table--%>
<table>
  <tr>
    <td>Name</td>
    <td>Age</td>
    <td>Gender</td>
  </tr>
  <tbody>
  <%--Data is in the backend, cannot be directly fetched, thus requires a "request"--%>
  </tbody>
</table>
</body>
</html>

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

Press F12 to open the console page, then click "Load Data" to see console.log("test2"); run, outputting "test2"

8.4.5.3. Output the Content of userList

Simply modify the function from the previous step

xml 复制代码
  <script>
    $(function () {
      $("#btn").click(function (){
        //$.post(url, param[optional], 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. Update the JavaScript Version

As shown, the default is generally 6+

8.4.5.5. Further Modify test2.jsp to Directly Display userList on the Web Page

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[optional], 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); //Put the elements from var html="<>"; into this line
        });

      })
    });

  </script>
</head>

<body>
<%--First capture the event--%>
<input type="button" value="Load Data" id="btn">
<%--Display with a table--%>
<table>
  <tr>
    <td>Name</td>
    <td>Age</td>
    <td>Gender</td>
  </tr>
  <tbody id="content">
  <%--Data is in the backend, cannot be directly fetched, thus requires a "request"--%>
  </tbody>
</table>
</body>
</html>

8.4.6. Run

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

8.5. Ajax Username Verification Experience

8.5.1. Modify 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 //Returns to the view resolver
@RestController   //Does not return to the view resolver
public class AjaxController {
    @RequestMapping("/t1")
    public String test(){
        return "hello";
    }

//    If access to test2.jsp is needed from the controller, the view resolver in applicationContext.xml must be used
//    In this case, the outermost AjaxController method needs to use the @Controller annotation
//    @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>();
        //Add data
        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, these data should be in the database
            if ("admin".equals(name)){
                msg = "Accepted";
            }else {
                msg = "name has an error";
            }
        }
        if (pwd != null){
            //123456, these data should be in the database
            if ("123456".equals(pwd)){
                msg = "Accepted";
            }else {
                msg = "password has an error";
            }
        }
        return msg;
    }
}

8.5.2. Create 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);  //Print data on the webpage
        }
      });
    }

    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>
<%--  On focus loss--%>
  Username: <input type="text" id="name" onblur="a1()">
<%--  Prompt information--%>
  <span id="userInfo"></span>
</p>
<p>
  Password: <input type="text" id="pwd" onblur="a2()">
  <span id="pwdInfo"></span>
</p>

</body>
</html>

8.5.3. Run

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

相关推荐
掘金一周7 分钟前
Flutter Riverpod 3.0 发布,大规模重构下的全新状态管理框架 | 掘金一周 9.18
前端·人工智能·后端
一涯18 分钟前
页面出现空白区域
前端
spmcor42 分钟前
MinIO本地对象存储部署指南
前端
少年纪1 小时前
前端用 pdf.js 将 PDF 渲染到 Canvas 再转图片,文字消失的坑
前端
RoyLin1 小时前
TypeScript设计模式:复合模式
前端·后端·typescript
我是天龙_绍1 小时前
CSS/JS/图片全挂了,部署后页面白屏/资源加载失败?这两个配置项坑了多少人!
前端
我的小月月1 小时前
SQLFE:网页版数据库(VUE3+Node.js)
前端·后端
小高0071 小时前
🌐ES6 这 8 个隐藏外挂,知道 3 个算我输!
前端·javascript·面试
汤姆Tom1 小时前
Node.js 版本管理、NPM 命令、与 NVM 完全指南
前端·npm·node.js
Alan521591 小时前
Java 后端实现基于 JWT 的用户认证和权限校验(含代码讲解)
前端·后端