Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求
Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中
引入
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
get请求示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<div id="app">
<p>{{returnInfo}}</p>
<p>总数量：{{getTotal}}</p>
<p v-for="(value,index) in returnInfo">
编号：{{value.id}}，名称：{{value.name}}，数量：{{value.num}}
<button @click="addOne(index)">加1</button>
<button @click="lessOne(index)">减1</button>
</p>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
returnInfo: null,
total: 0
}
},
mounted() {
axios
.get('https://www.zoutl.cn/getFruitListJson')
.then(response => (this.returnInfo = response.data.rows))
.catch(function (error) {
console.log(error);
});
},
methods: {
//水果数量加1
addOne: function (index) {
this.returnInfo[index].num++;
},
//水果数量减1
lessOne: function (index) {
if (this.returnInfo[index].num > 0) {
this.returnInfo[index].num--;
}
}
},
computed: {
//计算水果总数
getTotal: function () {
let total = 0;
for (let i = 0; i < this.returnInfo.length; i++) {
total += this.returnInfo[i].num;
}
return total;
}
}
})
</script>
</body>
</html>
post请求示例
直接在url中拼接要传递的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<div id="app" style="margin-left: 20%;margin-top: 10%">
<p>输入水果的信息:</p>
编号:<input type="text" v-model="fruitId"/>
名称:<input type="text" v-model="fruitName"/>
数量:<input type="text" v-model="fruitNum"/>
<button @click="submitData">提交</button>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
fruitId: 1,
fruitName: '苹果',
fruitNum: 3
},
methods: {
submitData: function () {
axios
.post('https://www.zoutl.cn/getFruitJson2?id=' + this.fruitId + '&name=' + this.fruitName + '&num=' + this.fruitNum + '')
.then(function (response) {
let id = response.data.id;
let name = response.data.name;
let num = response.data.num;
alert("编号:" + id + "，名称:" + name + "，数量:" + num);
})
.catch(function (error) {
console.log(error);
});
}
}
})
</script>
</body>
</html>
使用URLSearchParams传递数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<div id="app" style="margin-left: 20%;margin-top: 10%">
<p>输入水果的信息:</p>
编号:<input type="text" v-model="fruitId"/>
名称:<input type="text" v-model="fruitName"/>
数量:<input type="text" v-model="fruitNum"/>
<button @click="submitData">提交</button>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
fruitId: 1,
fruitName: '苹果',
fruitNum: 3,
myInfo: ''
},
methods: {
submitData: function () {
let param = new URLSearchParams();
param.append("id", this.fruitId);
param.append("name", this.fruitName);
param.append("num", this.fruitNum);
axios
.post('https://www.zoutl.cn/getFruitJson2', param)
.then(function (response) {
let id = response.data.id;
let name = response.data.name;
let num = response.data.num;
alert("编号:" + id + "，名称:" + name + "，数量:" + num);
})
.catch(function (error) {
console.log(error);
});
}
}
})
</script>
</body>
</html>