vue-resource
vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务。 当vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,在这里大家了解一下vue-resource就可以。
vue-resource的github: github.com/pagekit/vue…
axios
什么是axios
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中
注: Promise 对象用于表示一个异步操作的最终状态(完成或失败),以及其返回的值。
axios的github:github.com/axios/axios
中文说明: www.kancloud.cn/yunye/axios…
axios的语法
- get请求
// 为给定 ID 的 user 创建请求
axios.get('/user?id=12')
.then(response=>{
console.log(response);
})
.catch(error=>{
console.log(error);
});
// 可选地,上面的请求可以这样做
axios.get('/user', {
params: {
id: 12
}
})
.then(response=>{
console.log(response);
})
.catch(error=>{
console.log(error);
});
- post请求
axios.post('/user', {
id: 12,
username:"hongchen"
})
.then(response=>{
console.log(response);
})
.catch((error=>{
console.log(error);
});
axios的使用
需求:使用axios发送异步请求给ServletDemo01,并在页面上输出内容
步骤:
- 创建ServletDemo01
- 把axios和vue导入项目 引入到页面
- 使用get(), post() 请求
- html页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用axios发送异步请求</title>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<!--
目标:当页面加载的时候,发送异步请求给ServletDemo01,
获取响应数据,展示到id为msg的div中
-->
<div id="msg" v-text="message"></div>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
message:""
},
created(){
//使用axios发送异步请求,异步的get请求可以通过url地址携带数据
/*axios.get("/demo01?id=12&username=hongchen").then(response =>{
//response就是服务器端的响应, response.data才是我们想要获取的响应体的数据
console.log(response.data)
this.message = response.data
})*/
//异步的get请求,还能通过json格式携带数据
/*axios.get("/demo01",{
params:{
id:12,
username:"hongchen"
}
}).then(response=>{
//拿到响应体的数据赋值给message
this.message = response.data
})*/
//axios发送异步的post请求,并且携带请求参数,post方式也可在url后面携带请求参数
/*axios.post("/demo01?id=13&username=bo").then(response=>{
//拿到响应体的数据赋值给message
this.message = response.data
})*/
//axios发送异步的post请求,使用json格式携带请求参数
axios.post("/demo01",{id:14,username:"bo"}).then(response=>{
//拿到响应体的数据赋值给message
this.message = response.data
})
}
});
</script>
</body>
</html>
- ServletDemo01的代码
import com.bo.utils.JsonUtils;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.Map;
/**
* 包名:${PACKAGE_NAME}
*
* 日期2021-01-13 11:01
*/
@WebServlet("/demo01")
public class ServletDemo01 extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws javax.servlet.ServletException, IOException {
doGet(request, response);
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws javax.servlet.ServletException, IOException {
//获取"name=value&name=value"类型的参数
/*String id = request.getParameter("id");
String username = request.getParameter("username");*/
//获取json类型的请求参数
Map user = JsonUtils.parseJSON2Object(request, Map.class);
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write("你好世界:"+user.get("id")+","+user.get("username"));
}
}
小结
- get方式携带请求参数,以及post方式通过url携带请求参数,实际上携带给服务器的参数的格式是"name=value&name=value&name=value", 服务器接收到这种格式的请求参数的时候,可以使用request的getParameter(name)或者getParameterValues(name)或者getParameterMap()方法获取请求参数
- post方式通过json格式携带请求参数,那么提交给服务器的参数的格式是{name:value,name:value},服务器就无法通过以前的getParameter(name)等方法获取请求参数。那么服务器要通过解析json获取,我们直接使用工具类就行了