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
Title
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
Title
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里面的 （双向绑定）
