Ajax异步请求 axios
程序员文章站
2022-07-02 12:28:50
...
检查用户名是否已被注册
需求:
a. 有一个注册的表单, 有注册用户名和密码,一个提交按钮
b. 用户名输完之后,检测这个用户名是否可用
c. 就算服务器没有立即响应, 用户还能继续在表单上操作 -> 异步
分析:
1. 用户名输入框注册一个失去焦点事件(onblur)
2. 向服务器发送 异步 请求
3. 服务器响应之后, 提示信息 局部更新到页面上
实现步骤:
1.项目的创建,依然创建maven的web项目
2.导入相关依赖
<!--
版本号
-->
<properties>
<c3p0.version>0.9.1.2</c3p0.version>
<junit.version>4.12</junit.version>
<servlet.version>3.0.1</servlet.version>
<beanutils.version>1.6</beanutils.version>
<commons.logging.version>1.0</commons.logging.version>
<jstl.version>1.2</jstl.version>
<log4j.version>1.2.17</log4j.version>
<mabatis.version>3.5.0</mabatis.version>
<mysql.version>5.1.18</mysql.version>
</properties>
<dependencies>
<dependency>
<groupId>c3p0</groupId>
<artifactId>c3p0</artifactId>
<version>${c3p0.version}</version>
<!--
compile:希望三个环境: 编译 测试 运行
-->
<scope>compile</scope>
</dependency>
<!--
juint测试架包
-->
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>${junit.version}</version>
<scope>test</scope>
</dependency>
<!--
beanutils架包
-->
<dependency>
<groupId>commons-beanutils</groupId>
<artifactId>commons-beanutils</artifactId>
<version>${beanutils.version}</version>
</dependency>
<!--
servlet架包
-->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>${servlet.version}</version>
</dependency>
<!--
jstl标签库
-->
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>${jstl.version}</version>
</dependency>
<!--
log4j
-->
<dependency>
<groupId>log4j</groupId>
<artifactId>log4j</artifactId>
<version>${log4j.version}</version>
</dependency>
<!--
mysql数据库
-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>${mysql.version}</version>
</dependency>
<!--
mybatis
-->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>${mabatis.version}</version>
</dependency>
</dependencies>
<build>
<plugins>
<!--配置的是jdk编译器为 1.8-->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.8.1</version>
<configuration>
<!-- put your configurations here -->
<source>1.8</source>
<target>1.8</target>
</configuration>
</plugin>
<!--
配置测试中文乱码情况
-->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-surefire-plugin</artifactId>
<version>2.16</version>
<configuration>
<forkMode>once</forkMode>
<argLine>-Dfile.encoding=UTF-8</argLine>
</configuration>
</plugin>
<!--
tomcat7插件 一般不用 可以用做测试是时使用
-->
<plugin>
<groupId>org.apache.tomcat.maven</groupId>
<artifactId>tomcat7-maven-plugin</artifactId>
<version>2.2</version>
<configuration>
<port>80</port>
<path>/</path>
</configuration>
</plugin>
</plugins>
</build>
<!--将web工程打成war包-->
<packaging>war</packaging>
</project>3.html前端页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>注册:用户名校验</title>
</head>
<body>
<form action="">
<input type="text" name="username" placeholder="请输入用户名" id="username">
<span id="usernameSpan"></span>
<br>
<input type="password" name="password" placeholder="请输入密码"> <br>
<button>提交</button>
</form>
</body>
<script src="js/axios-0.18.0.js"></script>
<script>
/*
* 需求: 查看此用户名是否已注册
* 分析:
* 1. 前提: 注册的用户存到数据库中了
* 2. 判断: 数据库中是否有这个用户名
* 1). 如果有, 提示已被注册不可用
* 2). 如果没有, 提示可用
* 前端: 发起请求
* 事件: onblur
* 1). 请求的类型: 异步 (不跳转而且只要页面局部更新)
* 2). axios
* a. 请求地址
* b .请求参数
* */
document.getElementById("username").onblur = function () {
axios.post("/checkServlet",`username=${this.value}`).then(resp=>{
let ousernameSpan = document.getElementById("usernameSpan");
if (resp.data) {
ousernameSpan.innerHTML="√";
ousernameSpan.style.color="green";
}else{
ousernameSpan.innerHTML="×";
ousernameSpan.style.color="red";
}
});
}
</script>
</html>4.后台代码(我没有书写出后台访问数据查询的功能,而是直接写"死")
package com.itheima.sh.web;
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;
@WebServlet("/checkServlet")
public class CheckServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1 由于是post请求,所有我们先处理请求乱码
request.setCharacterEncoding("utf-8");
//获取请求参数
String username = request.getParameter("username");
if ("孙红雷".equals(username)){
response.getWriter().println("false");
}else{
response.getWriter().println("true");
}
}
}
5.启动tomcat服务器,并访问页面
5.1当我们输入"张三"时,鼠标离焦时或看到如下现象
5.1当我们输入"孙红雷"时,鼠标离焦时或看到如下现象
6.以上就是Ajax利用axios实现异步请求,当然"孙红雷"只是我模拟的从数据库中查询的数据,具体应用时还要以数据库中查询的数据为主.
同时,也欢迎大家提出问题,我会尽我所能为大家解决问题.