Vue,resource基本使用

Vue,resource基本使用

 url都失效了, 只能用自己的了, 就post好使, 得开本地的服务

  

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <script src="../js/vue.js"></script>
 6         <script src="../js/vue-resource-1.3.4.js"></script>
 7         <!-- 挂载了 this.$http, 可以.出来很多方法 -->
 8         <title></title>
 9     </head>
10     <body>
11         <div id="app">
12             <input type="button" value="get请求" @click="getInfo" />
13             <input type="button" value="post请求" @click="postInfo" />
14             <input type="button" value="josnp请求" @click="jsonpInfo" />
15         </div>
16     </body>
17 </html>
18 <script>
19     var vm = new Vue({
20         el:'#app',
21         data:{},
22         methods:{
23             getInfo(){
24                 //  当发起get请求之后, 通过  then 来设置成功的回调函数
25                 this.$http.get('http://localhost:8080/jiangbx/zdDept/list.do').then(function(result){
26                     // 通过 result.body 拿到服务器返回的成功的数据
27                     // console.log(result.body)
28                 })
29             },
30             postInfo(){  // 发起 post 请求   application/x-wwww-form-urlencoded
31                 //  手动发起的 post 请求, 默认没有表单格式, 所以, 有的服务器处理不了
32                 //  通过 post 方法的第三个参数, { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式
33                 this.$http.post('http://localhost:8080/jiangbx/zdDept/list.do',{},{}).then(result=>{
34                     console.log(result.body)
35                 })
36             },
37             jsonpInfo(){
38                 this.$http.jsonp('http://localhost:8080//jiangbx/zdDept/list.do').then(result => {
39                     console.log(result.body)
40                 })
41             }
42         }
43     });
44 </script>

猜你喜欢

转载自www.cnblogs.com/wo1ow1ow1/p/11081637.html