Ajax了解

• AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。
• AJAX 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。
• Ajax 不是一種新的編程語言，而是一種用于創建更好更快以及交互性更強的Web應用程序的技術。

簡單示例

1.創建普通Maven項目后，添加web框架

2.配置web.xml配置文件，改為最新的4.0版本

<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"version="4.0"> </web-app>

3.在web.xml配置注冊DispatcherServlet

<!--1.注冊DispatcherServlet--><servlet><servlet-name>springmvc</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><!--關聯一個springmvc的配置文件:【servlet-name】-servlet.xml--><init-param><param-name>contextConfigLocation</param-name><param-value>classpath:springmvc-servlet.xml</param-value></init-param><!--啟動級別-1--><load-on-startup>1</load-on-startup></servlet><!--/ 匹配所有的請求；（不包括.jsp）--><!--/* 匹配所有的請求；（包括.jsp）--><servlet-mapping><servlet-name>springmvc</servlet-name><url-pattern>/</url-pattern></servlet-mapping>

4.配置springmvc-servlet.xml配置文件,名稱：springmvc-servlet.xml,說明，這里的名稱要求是按照官方來的。

加入jackson統一亂碼解決，這是SpringMVC自帶的！

<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns:context="http://www.springframework.org/schema/context"xmlns:mvc="http://www.springframework.org/schema/mvc"xsi:schemaLocation="http://www.springframework.org/schema/beanshttp://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.springframework.org/schema/contexthttps://www.springframework.org/schema/context/spring-context.xsdhttp://www.springframework.org/schema/mvchttps://www.springframework.org/schema/mvc/spring-mvc.xsd"><context:component-scan base-package="com.shan.controller"/><mvc:default-servlet-handler /><!--jackson統一亂碼解決--><mvc:annotation-driven><mvc:message-converters register-defaults="true"><bean class="org.springframework.http.converter.StringHttpMessageConverter"><constructor-arg value="UTF-8"/></bean><bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"><property name="objectMapper"><bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean"><property name="failOnEmptyBeans" value="false"/></bean></property></bean></mvc:message-converters></mvc:annotation-driven><!-- 視圖解析器 --><bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" id="internalResourceViewResolver"><!-- 前綴 --><property name="prefix" value="/WEB-INF/jsp/" /><!-- 后綴 --><property name="suffix" value=".jsp" /></bean></beans>

5.實體類User

package com.shan.pojo;import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor;@Data @AllArgsConstructor @NoArgsConstructor public class User {private String name;private int age;private String sex;}

6.編寫一個AjaxController

package com.shan.controller;import com.shan.pojo.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 ajax1(String name , HttpServletResponse response) throws IOException {if ("小黑神".equals(name)){response.getWriter().print("true");}else{response.getWriter().print("false");}}@RequestMapping("/a2")public List<User> ajax2(){List<User> list = new ArrayList<User>();list.add(new User("小黑神1號",13,"男"));list.add(new User("小黑神2號",15,"男"));list.add(new User("小黑神3號",18,"男"));return list; //由于@RestController注解，將list轉成json格式返回}@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格式返回}}

7.導入jquery ， 可以使用在線的CDN ， 也可以下載導入

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>

8.編寫前端頁面

index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><title>ajax初試</title><%--<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 在線引用--%><%--下載jquery后導入--%><script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script><%--<script src="statics/js/jquery-3.6.0.js"></script> 這個是自己琢磨的，也可以引用jquery--%><script>function a1(){$.post({url:"${pageContext.request.contextPath}/a1",data:{'name':$("#txtName").val()},success:function (data,status) {alert(data);alert(status); //狀態碼}});}</script> </head> <body><%--onblur：失去焦點觸發事件--%> 用戶名:<input type="text" id="txtName" onblur="a1()"/></body> </html>

login.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><title>ajax</title><script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.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" onblur="a1()"/><span id="userInfo"></span> </p> <p>密碼:<input type="password" id="pwd" onblur="a2()"/><span id="pwdInfo"></span> </p> </body> </html>

user.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><title>user</title> </head> <body> <input type="button" id="btn" value="獲取數據"/> <table width="80%" align="center" border="1px" style="border: red"><tr><td>姓名</td><td>年齡</td><td>性別</td></tr><tbody id="content"></tbody> </table><script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script> <script>$(function (){$("#btn").click(function () {$.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);});})}) </script> </body> </html>

9.配置Tomcat運行

記得將依賴包導入到tomcat中，否則會出現找不到依賴包的錯誤！！！

Ajax在我們開發中十分重要，一定要學會使用！

作者有話說

博客創作不易，希望看到這里的讀者動動你的小手點個贊，如果喜歡的小伙伴可以一鍵三連，作者大大在這里給大家謝謝了。

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的SpringMVC学习10之AJAX初体验和了解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。