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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="../lib/vue.js">script>
    <script src="../lib/vue-resource-1.3.4.js">script>
    
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>

你可能感兴趣的:(Vue)