• 初学SpringMVC之 Ajax 篇

    Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页，能够更新部分网页的技术

    Ajax 不是编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序技术

    使用 Ajax 技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新

    pom.xml：

    1.     <dependency>
    2.       <groupId>junitgroupId>
    3.       <artifactId>junitartifactId>
    4.       <version>4.13.2version>
    5.     dependency>
    6.  
    7.     <dependency>
    8.       <groupId>org.springframeworkgroupId>
    9.       <artifactId>spring-webmvcartifactId>
    10.       <version>5.2.0.RELEASEversion>
    11.     dependency>
    12.  
    13.     <dependency>
    14.       <groupId>javax.servletgroupId>
    15.       <artifactId>javax.servlet-apiartifactId>
    16.       <version>4.0.1version>
    17.     dependency>
    18.  
    19.     <dependency>
    20.       <groupId>javax.servlet.jspgroupId>
    21.       <artifactId>javax.servlet.jsp-apiartifactId>
    22.       <version>2.3.3version>
    23.       <scope>providedscope>
    24.     dependency>
    25.  
    26.     <dependency>
    27.       <groupId>javax.servletgroupId>
    28.       <artifactId>jstlartifactId>
    29.       <version>1.2version>
    30.     dependency>
    31.  
    32.     <dependency>
    33.       <groupId>org.projectlombokgroupId>
    34.       <artifactId>lombokartifactId>
    35.       <version>1.18.34version>
    36.     dependency>
    37.  
    38.     <dependency>
    39.       <groupId>com.fasterxml.jackson.coregroupId>
    40.       <artifactId>jackson-databindartifactId>
    41.       <version>2.17.2version>
    42.     dependency>
    43.  
    44.     <dependency>
    45.       <groupId>com.alibabagroupId>
    46.       <artifactId>fastjsonartifactId>
    47.       <version>2.0.51version>
    48.     dependency>

    web.xml：

    1. "1.0" encoding="UTF-8"?>
    2. <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
    3.          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    4.          xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
    5.                       http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
    6.          version="4.0"
    7.          metadata-complete="true">
    8.  
    9.   <servlet>
    10.     <servlet-name>springmvcservlet-name>
    11.     <servlet-class>org.springframework.web.servlet.DispatcherServletservlet-class>
    12.     <init-param>
    13.       <param-name>contextConfigLocationparam-name>
    14.       <param-value>classpath:applicationContext.xmlparam-value>
    15.     init-param>
    16.     <load-on-startup>1load-on-startup>
    17.   servlet>
    18.   <servlet-mapping>
    19.     <servlet-name>springmvcservlet-name>
    20.     <url-pattern>/url-pattern>
    21.   servlet-mapping>
    22.  
    23.   <filter>
    24.     <filter-name>encodingfilter-name>
    25.     <filter-class>org.springframework.web.filter.CharacterEncodingFilterfilter-class>
    26.     <init-param>
    27.       <param-name>encodingparam-name>
    28.       <param-value>UTF-8param-value>
    29.     init-param>
    30.   filter>
    31.   <filter-mapping>
    32.     <filter-name>encodingfilter-name>
    33.     <url-pattern>/*url-pattern>
    34.   filter-mapping>
    35. web-app>

    applicationContext.xml：

    1. "1.0" encoding="UTF-8"?>
    2. <beans xmlns="http://www.springframework.org/schema/beans"
    3.        xmlns:context="http://www.springframework.org/schema/context"
    4.        xmlns:mvc="http://www.springframework.org/schema/mvc"
    5.        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    6.        xsi:schemaLocation="http://www.springframework.org/schema/beans
    7.         http://www.springframework.org/schema/beans/spring-beans-3.2.xsd
    8.         http://www.springframework.org/schema/context
    9.         http://www.springframework.org/schema/context/spring-context-3.2.xsd
    10.         http://www.springframework.org/schema/mvc
    11.         http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd">
    12.  
    13.     
    14.     <context:component-scan base-package="com.demo.controller"/>
    15.  
    16.     
    17.     <mvc:default-servlet-handler/>
    18.  
    19.     
    20.     
    21.  
    22.     
    23.     <mvc:annotation-driven>
    24.         <mvc:message-converters register-defaults="true">
    25.             <bean class="org.springframework.http.converter.StringHttpMessageConverter">
    26.                 <constructor-arg value="UTF-8"/>
    27.             bean>
    28.             <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
    29.                 <property name="objectMapper">
    30.                     <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">
    31.                         <property name="failOnEmptyBeans" value="false"/>
    32.                     bean>
    33.                 property>
    34.             bean>
    35.         mvc:message-converters>
    36.     mvc:annotation-driven>
    37.  
    38.     
    39.     <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"
    40.           id="InternalResourceViewResolver">
    41.         
    42.         <property name="prefix" value="/WEB-INF/jsp/"/>
    43.         
    44.         <property name="suffix" value=".jsp"/>
    45.     bean>
    46. beans>

    text.html：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="utf-8">
    5.     <title>title>
    6.     <script>
    7.         function go(){
    8.             var url = document.getElementById("url").value;
    9.             document.getElementById("iframe").src = url;
    10.         }
    11.     script>
    12. head>
    13. <body>
    14. <div>
    15.     <p>输入地址：p>
    16.     <p>
    17.         <input type="text" id="url" value="https://www.4399.com/"/>
    18.         <input type="button" value="提交" onclick="go()"/>
    19.     p>
    20. div>
    21.  
    22. <div>
    23.     <iframe id="iframe" style="width: 100%;height: 500px">iframe>
    24. div>
    25. body>
    26. html>

    效果如下：

    （上述仅实现类似异步的模样，局部改变） 

     官网下载 jquery，放到 js 目录下

    AjaxController.java：

    1. package com.demo.controller;
    2.  
    3. import org.springframework.web.bind.annotation.RequestMapping;
    4. import org.springframework.web.bind.annotation.RestController;
    5.  
    6. import javax.servlet.http.HttpServletResponse;
    7. import java.io.IOException;
    8.  
    9. @RestController
    10. public class AjaxController {
    11.     @RequestMapping("/ajax")
    12.     public void test(String name, HttpServletResponse response) throws IOException {
    13.         System.out.println(name);
    14.         if("张三".equals(name)){
    15.             response.getWriter().println("true");
    16.         }else {
    17.             response.getWriter().println("false");
    18.         }
    19.     }
    20. }

    index.jsp：

    1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    2. <html>
    3.     <head>
    4.         <script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js">script>
    5.         <script>
    6.             function a(){
    7.                 $.post({
    8.                     url:"${pageContext.request.contextPath}/ajax",
    9.                     data:{"name":$("#username").val()},
    10.                     success:function(data){
    11.                         alert(data);
    12.                     }
    13.                 })
    14.             }
    15.         script>
    16.     head>
    17. <body>
    18. 用户名：<input type="text" id="username" onblur="a()">
    19. body>
    20. html>

    效果如下：

    XMLHttpRequest（简称 xhr），是浏览器提供的 JS 对象，通过它可以请求到服务器上的数据资源

    xhr 允许进行异步请求，它可以在后台执行，而不会阻止页面的其他操作

    Ajax 异步加载数据：

    User.java：

    1. package com.demo.pojo;
    2.  
    3. import lombok.AllArgsConstructor;
    4. import lombok.Data;
    5. import lombok.NoArgsConstructor;
    6.  
    7. @Data
    8. @AllArgsConstructor
    9. @NoArgsConstructor
    10. public class User {
    11.     private String name;
    12.     private int age;
    13. }

    AjaxController.java：

    1. package com.demo.controller;
    2.  
    3. import com.demo.pojo.User;
    4. import org.springframework.web.bind.annotation.RequestMapping;
    5. import org.springframework.web.bind.annotation.RestController;
    6.  
    7. import java.util.ArrayList;
    8. import java.util.List;
    9.  
    10. @RestController
    11. public class AjaxController {
    12.     @RequestMapping("/list")
    13.     public List list(){
    14.         List arrayList = new ArrayList();
    15.  
    16.         //添加数据
    17.         arrayList.add(new User("张三1",3));
    18.         arrayList.add(new User("张三2",3));
    19.  
    20.         return arrayList;
    21.     }
    22. }

    list.jsp：

    1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js">script>
    7. 		<script>
    8. 			$(function(){
    9. 				$("#btn").click(function(){
    10. 					$.post("${pageContext.request.contextPath}/list",function (data){
    11. 						//console.log(data);
    12. 						var html="";
    13. 						for(let i = 0;i < data.length;i++){
    14. 						    html += "" +
    15. 						        "" + data[i].name + "" +
    16. 						        "" + data[i].age + "" +
    17. 						        ""
    18. 						}
    19. 						$("#content").html(html);
    20. 					})
    21. 				})
    22. 			});
    23. 		script>
    24. 	head>
    25. 	<body>
    26. 		<input type="button" value="加载数据" id="btn"/>
    27. 		<table>
    28. 			<tr>
    29. 				<td>姓名td>
    30. 				<td>年龄td>
    31. 			tr>
    32. 			<tbody id="content">tbody>
    33. 		table>
    34. 	body>
    35. html>

    效果如下：

    Ajax 验证用户名：

    login.jsp：

    1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js">script>
    7. 		<script>
    8. 			function a1(){
    9.                 $.post({
    10.                     url:"${pageContext.request.contextPath}/login",
    11.                     data:{"name":$("#name").val()},
    12.                     success:function(data){
    13.                         console.log(data);
    14.                     }
    15.                 })
    16. 			}
    17. 			function a2(){
    18.                 $.post({
    19.                     url:"${pageContext.request.contextPath}/login",
    20.                     data:{"pwd":$("#pwd").val()},
    21.                     success:function(data){
    22.                         console.log(data);
    23.                     }
    24.                 })
    25. 			}
    26. 		script>
    27. 	head>
    28. 	<body>
    29. 		<p>
    30. 			用户名：<input type="text" id="name" onblur="a1()">
    31. 			<span id="userInfo">span>
    32. 		p>
    33. 		<p>
    34. 			密码：<input type="text" id="pwd" onblur="a2()"/>
    35. 			<span id="pwdInfo">span>
    36. 		p>
    37. 	body>
    38. html>

    AjaxController.java：

    1. package com.demo.controller;
    2.  
    3. import org.springframework.web.bind.annotation.RequestMapping;
    4. import org.springframework.web.bind.annotation.RestController;
    5.  
    6. @RestController
    7. public class AjaxController {
    8.     @RequestMapping("/login")
    9.     public String login(String name,String pwd) {
    10.         String msg = "";
    11.         if (name != null) {
    12.             if ("admin".equals(name)) {
    13.                 msg = "true";
    14.             } else {
    15.                 msg = "用户名错误";
    16.             }
    17.         }
    18.         if(pwd != null){
    19.             if("123".equals(pwd)){
    20.                 msg = "true";
    21.             } else {
    22.                 msg = "密码错误";
    23.             }
    24.         }
    25.         return msg;
    26.     }
    27. }

    效果如下：

  • 相关阅读:
    .NET ASPIRE 预览版 7 发布
    组件自定义事件
    软件测试菜鸟如何做好功能测试？
    【原创】常用元器件(电阻)选型之阻值有多少-cayden20220910
    可视化工具Datart踩（避）坑指南（3）——筛选框的疑惑
    shardingsphere做了读写分离做了主从配置脱敏无效分析
    Chief Ray and Margin Ray and Principle Ray(主光线和边缘光线)
    聚焦光量子应用开发！Quandela 发布新版量子计算云服务
    模拟实现简单的通讯录
    C语言如何执行HTTP GET请求
  • 原文地址：https://blog.csdn.net/m0_58838332/article/details/140399924