【SpringMVC 笔记】Ajax 入门，linux 编程基础李养群课后答案
<h3>加载页面位置:</h3>
<iframe id="iframePosition" style="width: 70%" height="500px"></iframe>
</div>
</body>
</html>
利用 AJAX 可以做：
注册时，输入用户名自动检测用户是否已经存在。
登陆时，提示用户名密码错误
删除数据行时，将行 ID 发送到后台，后台在数据库中删除，数据库删除成功后，在页面 DOM 中将数据行也删除
…等等
==============================================================================
有兴趣可以了解 JS 原生 XMLHttpRequest，我们直接学习 JQuery 提供的 Ajax。
Ajax 的核心是 XMLHttpRequest 对象 (XHR)，
XHR 为向服务器发送请求和解析服务器响应提供了接口，能够以异步方式从服务器获取新数据。
jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法，可以使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON，同时能够把这些外部数据直接载入网页的被选元素中。
jQuery Ajax 本质就是 XMLHttpRequest，对他进行了封装，方便调用。
jQuery.ajax(...)
部分参数：
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 将自动替换 ? 为正确的函数名，以执行回调函数
常规配置 web.xml 和 applicationContext.xml：
web.xml：
<?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">
<servlet>
<servlet-name>springmvc</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>springmvc</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<filter>
<filter-name>encoding</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>encoding</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>
applicationContext.xml：记得加 静态资源过滤 和 注解驱动配置。
<?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/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">
<context:component-scan base-package="com.yusael.controller"/>
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"
id="internalResourceViewResolver">
<property name="prefix" value="/WEB-INF/jsp/" />
<property name="suffix" value=".jsp" />
</bean>
</beans>
编写一个 AjaxController：
@RestController
public class AjaxController {
@RequestMapping("/ajax1")
public void ajax1(String name, HttpServletResponse response) throws IOException {
if ("admin".equals(name)) {
response.getWriter().write("true
");
} else {
response.getWriter().write("false");
}
}
}
编写 index.jsp 测试：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Ajax 测试</title>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.min.js"></script>
<script> function a1() {
$.ajax({
url : "${pageContext.request.contextPath}/ajax1",
data : {'name' : $("#username").val()},
success : function(data, status) {
alert(data);
alert(status);
},
error : function () {}
});
} </script>
</head>
<body>
<%--onblur：失去焦点触发事件--%>
用户名: <input type="text" id="username" onblur="a1()">
</body>
</html>
================================================================================
首先写一个实体类 User：
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
private String name;
private int age;
private String sex;
}
在 Controller 中获取一个集合对象，展示到前端页面：
@RequestMapping("/ajax2")
public List<User> ajax2() {
List<User> list = new ArrayList<>();
list.add(new User("zhenyu", 21, "男"));
list.add(new User("yusael", 99, "男"));
list.add(new User("hahaha", 18, "女"));
return list; // 由于 @RestController 注解, 将 list 转成 json 格式返回
}
前端页面：ajaxtest.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax 测试</title>
</head>
<body>
<input type="button" id="btn" value="获取数据"/>
<table width="80%" align="center">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tbody id="content"></tbody>
</table>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.min.js"></script>
<script> $(function () {
$("#btn").click(function () {
{pageContext.request.contextPath}/ajax2", 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>
===============================================================================
思考一下：我们平时登录时，输入框后面的实时提示是怎么做到的？
Controller：
@RequestMapping("/ajax3")
public String ahax3(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;
}
前端页面 login.jsp：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Login</title>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.min.js"></script>
<script> function a1() {
$.post({
url : "${pageContext.request.contextPath}/ajax3",
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() {
{pageContext.request.contextPath}/ajax3", {'pwd' : $("#pwd").val()}, 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="text" id="pwd" onblur="a2()">
<span id="pwdInfo"></span>
</p>
</body>
</html>
注：记得处理 JSON 乱码！
applicationContext.xml 中加入以下代码：
<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">
还未添加个人签名 2021.11.08 加入
还未添加个人简介
评论