本文主要是介绍10 Source-Get-Post-JsonP 网络请求，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
划重点
- 使用vue-resource.js库 进行网络请求操作
- POST : this.$http.post ( … )
- GET : this.$http.get ( … )
小鸡炖蘑菇
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="./lib/vue-2.6.10.js"></script><!-- <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script> --><script src="./lib/vue-resource.js"></script> <title>Document</title>
</head><body><div id="app"><table class="table table-bordered table-hover table-striped"><thead><tr><th>Id</th><th>Name</th><th>Ctime</th><th>Operation</th></tr></thead><tbody><tr v-show="flag" v-for="item in list" :key="item.id" ><td>{{ item.id }}</td><td>{{ item.name }}</td><td>{{ item.ctime }}</td><td><a href="http://www.baidu.com" @click.prevent="del">删除</a></td></tr></tbody></table></div><script>Vue.http.options.root = 'http://jsonplaceholder.typicode.com/';//全局配置根 地址Vue.http.options.emulateJSON = true;var vm = new Vue({el: '#app',data: {flag: false,//默认没有加载完成数据的情况下：不显示list: [{ id: 1, name: '奔驰', ctime: new Date() },{ id: 2, name: '法拉利', ctime: new Date() }]},created() {this.testUrl();},methods: {del() {alert("22344578");},testUrl() {// 前端服务器测试用的万能地址：http://jsonplaceholder.typicode.com/users//POST // this.$http.post('http://jsonplaceholder.typicode.com/users').then(response => {// alert('Post传统请求成功');// }, response => {// alert('Post请求失败～～～');// })// GET /someUrlthis.$http.get('users').then(response => {this.flag = true;// get body datathis.list = response.body;alert(this.list+"333")});// 传统写法// this.$http.get('http://jsonplaceholder.typicode.com/users').then(function (response) {// alert("传统请求成功");// // 响应成功回调// }, function (response) {// // 响应错误回调// alert('传统请求失败～～～');// });}}})</script>
</body></html>
网络请求结果的效果图
这篇关于10 Source-Get-Post-JsonP 网络请求的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
