Ajax异步请求 axios (重要!)
axios介绍
原生ajax请求的代码编写太过繁琐,我们可以使用axios这个库来简化操作！
在后续学习的Vue(前端框架)中发送异步请求,使用的就是axios.
需要注意的是axios不是vue的插件,它可以独立使用.
axios(https://www.kancloud.cn/yunye/axios/234845)
使用步骤：
1.引入axios核心js文件。
2.调用axios对象的方法来发起异步请求。（可以理解为java里面的调用静态方法）
3.调用axios对象的方法来处理响应的数据。（可以理解为java里面的调用静态方法）
axios常用方法：
链接: https://pan.baidu.com/s/1KZ4_FANQdwr3dLOPZbjIGg 提取码: 9zvg 复制这段内容后打开百度网盘手机App，操作更方便哦
#备注: then函数的参数response是一个json对象,我们重点只需要了解response.data即可
{
// `data` 由服务器提供的响应 (重要!)
data: {},
// `status` 来自服务器响应的 HTTP 状态码
status: 200,
// `statusText` 来自服务器响应的 HTTP 状态信息
statusText: 'OK',
// `headers` 服务器响应的头
headers: {},
// `config` 是为请求提供的配置信息
config: {}
}
代码实践：
html
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<input type="button" value="axios的get异步请求" onclick="method01()"> <br>
<input type="button" value="axios的post异步请求" onclick="method02()"> <br>
body>
<script src="js/axios-0.18.0.js">script>
<script>
function method01() {
/*
* # axios的api介绍
* 1. get(url)
* url : 请求地址(要包含请求参数)
* 2. then(fn)
* fn(response) : 响应成功的回调函数
* response.data : 响应体数据
*
* 3. catch(fn)
* fn(error) : 响应失败的的回调函数
* error : 错误信息
*
* 4. finally(fn)
* fn : 响应结束的回调函数(无论响应成功与否,都会执行)
* */
let param = "name=zs&age=18"
let url = "AjaxServlet?" + param
let t = function(response){
console.log(response)
console.log(response.data) // 响应体数据
}
let c = function(error){
console.log(error)
}
let f = function(){
console.log("hehe")
}
// axios.get(url).then().catch().finally()
// axios.get(url).then(t)
// axios.get(url).then(t).catch(c)
axios.get(url).then(t).catch(c).finally(f)
}
script>
<script>
function method02() {
/*
* 1. post(url,param)
* url : 请求地址(不能包含请求参数)
* param : 请求参数(走请求体)
*
* 2. 箭头函数 (相当于java中的lambda表达式)
* es6的新语法 !!!
*
* //普通函数
* function(response){
console.log(response.data) // 响应体数据
}
//箭头函数
response => {
console.log(response.data)
}
* */
let param = "name=ww&age=20"
let url = "AjaxServlet"
let t = function(response){
console.log(response)
console.log(response.data) // 响应体数据
}
let c = function(error){
console.log(error)
}
let f = function(){
console.log("hehe")
}
// axios.post(url,param).then().catch().finally()
/* axios.post(url,param).then(function(response){
console.log(response.data) // 响应体数据
})*/
/* axios.post(url,param).then(response => {
console.log(response.data)
})*/
axios.post(url,param).then(response => {
console.log(response.data)
}).catch(error => {
console.log(error);
}).finally(()=>{
console.log("xixi");
})
}
script>
html>
java
package com.itheima01.ajax;
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("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1. 接收请求
String name = request.getParameter("name");
String age = request.getParameter("age");
System.out.println(name + "," + age);
//2. 处理业务
// int i = 1/0;
//3. 响应数据
// response.setHeader("content-type","text/html;charset=utf-8");
response.setContentType("text/html;charset=utf-8");
response.getWriter().print("hello");
}
}
检查用户名是否已被注册
#需求:
a. 有一个注册的表单, 有注册用户名和密码,一个提交按钮
b. 用户名输完之后,检测这个用户名是否可用
c. 就算服务器没有立即响应, 用户还能继续在表单上操作 -> 异步
#分析:
1. 用户名输入框注册一个失去焦点事件(onblur)
2. 向服务器发送 异步 请求
3. 服务器响应之后, 提示信息 局部更新到页面上
html
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Titletitle>
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). 如果没有, 提示可用
* 3. sql : select * from user where name = ?;
*
* 前端: 发起请求
* 事件: onblur
* 1). 请求的类型: 异步 (不跳转而且只要页面局部更新)
* 2). axios
* a. 请求地址
* b .请求参数
*
* 后端: 接收请求,业务处理,响应数据
* 1). 获取请求参数
* 2). 查询数据库
* 3). 根据结果响应
*
* 前端: 接收响应, 显示数据
*
* */
var usernameInput = document.getElementById("username");
usernameInput.onblur = function () {
let url = "CheckServlet"
// let param = `username=${usernameInput.value}`
let param = `username=${this.value}`
// console.log(param)
//url:配tomcat web 项目 就是拼接localhost//：8080 或者 spring/springboot配置tomcat插件 或者是 直接完整的地址（应用所有）
axios.post(url,param).then(resp=>{
//返回数据
// console.log(resp.data)
debugger//前端断点,可以通过代码实现
if(resp.data == true){
document.getElementById("usernameSpan").innerText = "此用户名可用"
}else
document.getElementById("usernameSpan").innerText = "此用户名已存在,不可用"
}
})
}
script>
html>
java
package com.itheima01.ajax;
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 doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 1). 获取请求参数
// post中文乱码
request.setCharacterEncoding("utf-8");
String username = request.getParameter("username");
//2). 查询数据库 (伪数据)
if("jack".equalsIgnoreCase(username)){
//用户名已存在,不可用
response.getWriter().print("false");
}else{
//用户名不存在,可用
response.getWriter().print("true");
}
}
}
https://www.cnblogs.com/tyheng/p/13124978.html
https://www.jianshu.com/p/8b7dd4b71eda
vue axios使用this. h t t p . g e t 和 t h i s . http.get 和 this. http.get和this.http.post传参
get：
vue GET传递参数要加上params
getInfo(){
console.log(this.page) this.$http.get('http://localhost:8080/resourceController/requestResourceListData',{params:{page:this.page,rows:this.rows}},{
emulateJSON:true
}).then(result =>{
console.log(result.body.rows)
this.list=result.body.rows
})
}
post
getInfo(){
console.log(this.page)
this.$http.post('http://localhost:8080/resourceController/requestResourceListData',{page:this.page,rows:this.rows},{
emulateJSON:true
}).then(result =>{
console.log(result.body.rows)
this.list=result.body.rows
})
}
1.page rows list 通过document.xxx（）获取
2.page rows list 是date里定义 绑定 html里面的 （双向绑定）