html引入vue请求数据_html中引用vue如何发送http

vue不支持直接发送AJAX请求，需要使用vue-resource、axios等插件实现。首先需要引入 vue.js,vue-resource.js

<script src="../js/vue.js"></script>
<script src="../js/vue-resource.min.js"></script>

下面是链接

https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js

https://cdn.staticfile.org/vue/2.2.2/vue.min.js

get请求

 this.$http.get('/try/ajax/ajax_info.txt').then(function(res){
                    document.write(res.body);    
                },function(){
                    console.log('请求失败处理');
                });

如果加参数

this.$http.get('get.php',{params : jsonData}) 

post请求

 //选考科目的可选项
                listXkkm: function () {
                    var url = baseURL + '/f/api/v1/zsxc/kaoshengInfo/listXkkm'
                    //发送 post 请求
                    this.$http.post(url, { emulateJSON: true }).then(function (res) {
                        this.touristList = res.data.data
                    });
                },

加参数

this.$http.post('/try/ajax/demo_test_post.php',{name:"111",sex:"1"},{emulateJSON:true})

使用 vue-resource 的 jsonp 处理跨域请求

<div id="app">
    请输入关键字：<input type="text" v-model="keyword" @keyup="sendJsonP(keyword)">
    <ul>
        <li v-for="r in result">{{r}}</li>
    </ul>
</div>
<script>
 
window.onload = function () {
  new Vue({
    el: '#app',
    data: {
      keyword: '',
      result: ''
    },
    methods: {
      sendJsonP(keyword) {
        let url = 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web';
        this.$http.jsonp(url, {
          params: {
            wd: keyword
          },
          jsonp: 'cb'//jsonp默认是callback,百度缩写成了cb，所以需要指定下                     }
        }).then(res => {
          if (res.data.g) {
            this.result = res.data.g.map(x => x['q']);
          } else {
            this.result = [];
          }
        });
      }
    }
  });
}
</script>