标签：function axios name Vue Ajax num let data response
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>
标签：function,axios,name,Vue,Ajax,num,let,data,response 来源： https://blog.csdn.net/zou666zou/article/details/123145171
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。