leyou_04_vue.js的ajax请求方式

1.异步查询数据，自然是通过ajax查询，大家首先想起的肯定是jQuery。但jQuery与MVVM的思想不吻合，而且ajax只是jQuery的一小部分。因此不可能为了发起ajax请求而去引用这么大的一个库。

 

2.vue.js的Ajax请求

1>安装axios

cnpm install axios --save

 

2>在main.js添加

 import Axios from ‘axios‘ Vue.prototype.$axios = Axios; new Vue({ el: ‘#app‘,Axios,components: { App },template: ‘<App/>‘ })

 

3>一个基础的get请求方式

axios.get("/item/category/list?pid=0") // 请求路径和请求参数拼接
    .then(function(resp){ // 成功回调函数
 }) .catch(function(){ // 失败回调函数
 }) // 参数较多时，可以通过params来传递参数
axios.get("/item/category/list",{ params:{ pid:0 } }) .then(function(resp){})// 成功时的回调
    .catch(function(error){})// 失败时的回调

 

4>　一个基础的post请求方式

axios.post("/user",{ name:"Jack",age:21 }) .then(function(resp){})// 成功时的回调 .catch(function(error){})// 失败时的回调

　注意，POST请求传参，不需要像GET请求那样定义一个对象，在对象的params参数中传参。post()方法的第二个参数对象，就是将来要传递的参数

3Juqery的Ajax请求

$.ajax({ type: "POST",url: "some.PHP",data: "name=John&age=25",success: function(data){ alert(data.name); },
　"json" });
 </script>
<script type="text/javascript" src="../jquery/jquery-2.2.3.js"></script> <script type="text/javascript">

 

 参数

type:ajax的请求方式
url:发送请求地址
data:待发送Key/value值
callback：发送成功时回调函数
json:返回内容格式 xml html script json text _default

 

3.1>简写方式

 $.post("test.PHP",//ajax的请求方式
　　　　　　{ "name": "John","age":25},//请求参数 function(data){　　　　　　　　//回调函数 alert(data.name); 
          console.log(data.age); 
          },"json");　　　　　　　　　　//返回数据的格式