Vue——13——vue resource发起get post jsonp请求

    技术2025-11-18  22

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../lib/vue.js"></script> <script src="../lib/vue-resource-1.3.4.js"></script> <!-- 注意 vue-resource依赖于vue,注意先后顺序导包 --> </head> <body> <div id="app"> <input type="button" value="get请求" @click="getInfo"> <input type="button" value="post请求" @click="postInfo"> <input type="button" value="jsonp请求" @click="jsonpInfo"> </div> <script> var vm=new Vue({ el:"#app", data:{}, methods:{ getInfo(){ //发起get请求 当发起get请求之后,通过.then来设置成功的回调函数 //通过result.body拿到服务器返回的成功数据 this.$http.get('http://jsonplaceholder.typicode.com/users').then(function(result){ console.log(result.body); }) }, postInfo(){ //手动发起的post请求,默认没有表单格式,所以有的服务器处理不了 //通过post方法的第三个参数设置提交的内容类型为普通表单数据 this.$http.post('http://jsonplaceholder.typicode.com/users',{},{emulateJSON:true}).then(result=>{ console.log(result.body); }) }, jsonpInfo(){//发起jsonp请求 this.$http.jsonp('http://jsonplaceholder.typicode.com/users').then(result=>{ console.log(result.body) }) } } }) </script> </body> </html>
    Processed: 0.018, SQL: 9