<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1"> <title>发送AJAX请求</title> <script src="https://www.jb51.net/js/vue.js"></script> <script src="https://www.jb51.net/js/axios.js"></script> <script src="https://www.jb51.net/js/vue-resource.js"></script> </head> <body> <div> <a>{{name}}</a> <button v-on:click="send">sendJSONP</button> </div> </body> <script> new Vue({ el: '#itany', data:{ name: 'alice', age: 19 }, methods:{ send:function(){ // https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=a this.$http.jsonp('https://sug.so.360.cn/suggest', {params:{ word:'a' }} ).then(function (resp) { console.log(resp.data) }) } } }) </script> </html>
vue发送跨域ajax请求带jsonp参数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1"> <title>发送AJAX请求</title> <script src="https://www.jb51.net/js/vue.js"></script> <script src="https://www.jb51.net/js/axios.js"></script> <script src="https://www.jb51.net/js/vue-resource.js"></script> </head> <body> <div> <button v-on:click="send">向百度搜索发送JSONP请求</button> </div> </body> <script> new Vue({ el:'#itany', data:{ name:'za' }, methods:{ send:function () { this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {params:{wd:'a'}, jsonp:'cb', //百度使用的jsonp参数名为cb，所以需要修改,默认使用的是callbakc参数就不用修改 }).then(function (resp) { console.log(resp.data) }).catch(function (err) { console.log(err) }) } } }) </script> </html>
Vue作为一个没有入侵性的框架并不限制你使用ajax框架
使用了Vue后，ajax部分你可以做如下选择：
1.使用JS原生XHR接口
2.引入JQuery或者Zepto 使用$.ajax();
3.Vue的github上提供了vue-resource插件 ：
4.使用 fetch.js
5.自己封装一个ajax库
至于哪种方式适合自己的项目大家可以自行选择
您可能感兴趣的文章: