目录
在原生JS中，可以使用以下几种方式实现局部刷新：
// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 设置请求方式和请求地址
xhr.open('GET', 'example.php', true);
// 发送请求
xhr.send();
// 监听响应状态变化
xhr.onreadystatechange = function() {
// 响应完成且响应状态为200时，更新页面
if (xhr.readyState === 4 && xhr.status === 200) {
var response = xhr.responseText;
// 更新DOM节点内容
document.getElementById('result').innerHTML = response;
}
};
// 发送GET请求
fetch('example.php')
.then(function(response) {
// 将响应解析为文本格式
return response.text();
})
.then(function(data) {
// 更新DOM节点内容
document.getElementById('result').innerHTML = data;
});
// 获取要刷新的DOM节点
var node = document.getElementById('result');
// 添加点击事件监听器
node.addEventListener('click', function() {
// 发送请求获取更新内容
fetch('example.php')
.then(function(response) {
// 将响应解析为文本格式
return response.text();
})
.then(function(data) {
// 更新DOM节点内容
node.innerHTML = data;
});
});
需要注意的是，使用以上方式进行局部刷新时，需要确保返回的数据格式与页面中要更新的DOM节点类型匹配。另外，使用异步请求时需要注意跨域问题。
package com.xzm.view;
import cn.dsna.util.images.ValidateCode;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* @Description 生成图片验证码
* @Author XueZhimin
* @CreateTime 2023-04-03 16:12
*/
@WebServlet("/codeServlet")
public class CodeServlet extends HttpServlet {
private static ValidateCode validateCode = null;
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
validateCode=new ValidateCode(100, 30, 4, 20);
String code = validateCode.getCode();
System.out.println(code);
request.getSession().setAttribute("code",code);
validateCode.write(response.getOutputStream());
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
<%--
Created by IntelliJ IDEA.
User: God_Like
Date: 2023/4/2
Time: 16:21
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>登录</title>
</head>
<body>
<form action="loginServlet" method="post">
<table border="1" width="80%" style="margin: auto">
<tr>
<th>用户名</th>
<td>
<input type="text" name="name" placeholder="请输入用户名">
</td>
</tr>
<tr>
<th>密码</th>
<td>
<input type="password" name="password" placeholder="请输入密码">
</td>
</tr>
<tr>
<th>
<img id="code" src="codeServlet" onclick="reFreshCode()">
</th>
<td>
<input type="code" name="code" placeholder="请输入验证码">
</td>
</tr>
<tr>
<td colspan="2">
<input style="width: 100%" type="submit" value="登录">
</td>
</tr>
</table>
</form>
<a href="registerServlet">注册</a>
</body>
</html>
<script type="application/javascript">
//实现验证码局部刷新
function reFreshCode() {
// 发送GET请求
fetch('codeServlet')
.then(function(response) {
// 将响应解析为文本格式
return response.url;
})
.then(function(data) {
// 更新DOM节点内容
document.getElementById('code').src = data;//DOM操作img标签，更改src
});
}
</script>