1.Vue.js Ajax(axios)
Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。
Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。
安装方法:
使用adn(arc引入):
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
或
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
使用npm:
npm i axios
使用 bower:
bower i axios
使用 yarn:
yarn add axios
浏览器支持情况:
get方法:
我们可以简单读取JSON数据:
get实例:
new Vue({
el: '#app',
data () {
return {
info: null
}
},
mounted () {
axios
.get('https://www.runoob.com/try/ajax/json_demo.json')
.then(response => (this.info = response))
.catch( (error) => { // 请求失败处理
console.log(error);
});
}
})
使用 response.data 读取 JSON 数据:
get实例:
<div id="app">
<h1>网站列表</h1>
<div
v-for="site in info"
>
{
{ site.name }}
</div>
</div>
<script type = "text/javascript">
new Vue({
el: '#app',
data () {
return {
info: null
}
},
mounted () {
axios
.get('https://www.runoob.com/try/ajax/json_demo.json')
.then(response => (this.info = response.data.sites))
.catch( (error) => { // 请求失败处理
console.log(error);
});
}
})
</script>
GET 方法传递参数格式如下:
传递参数说明
// 直接在 URL 上添加参数 ID=12345
axios.get('/user?ID=12345')
.then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error);
});
// 也可以通过 params 设置参数:
axios.get('/user', {
params: {
ID: 12345
}
})
.then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error);
});
POST方法:
POST 实例
new Vue({
el: '#app',
data () {
return {
info: null
}
},
mounted () {
axios
.post('https://www.runoob.com/try/ajax/demo_axios_post.php')
.then(response => (this.info = response))
.catch((error) => { // 请求失败处理
console.log(error);
});
}
})
POST 方法传递参数格式如下:
传递参数说明
axios.post('/user', {
firstName: 'Fred', // 参数 firstName
lastName: 'Flintstone' // 参数 lastName
})
.then((response) => {
console.l