Vue.js AJAX 跨域调用 JSONP
预览地址：http://djk8888.byethost32.com/VueAjaxJsonP/index.html
jQuery：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vue + jQuery AJAX</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<th>编号</th>
<th>姓名</th>
</tr>
<tr v-for="people in peoples">
<td>{{people.id}}</td>
<td>{{people.name}}</td>
</tr>
</table>
</div>
</body>
</html>
<script>
var vv = new Vue({
el: "#app",
data: {
peoples: [],
},
created: function () {
this.bind();
},
methods: {
bind: function () {
$.ajax({
type: "get",
dataType: "jsonp",
jsonp: "callback",
jsonpCallback:"callback",
url: "http://djk8888.byethost32.com/VueAjax/jsonp.html",
success: function (data) {
$.each(data, function (index, item) {
var sth = { id: item.id, name: item.name };
vv.peoples.push(sth);
});
}
});
},
}
});
</script>预览地址：http://djk8888.byethost32.com/VueAjaxJsonP/jQuery.html
vue-resource：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vue.js Ajax(vue-resource)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<th>编号</th>
<th>姓名</th>
</tr>
<tr v-for="people in peoples">
<td>{{people.id}}</td>
<td>{{people.name}}</td>
</tr>
</table>
</div>
<script>
var vv = new Vue({
el: "#app",
data: {
peoples: [],
},
created: function () {
this.bind();
},
methods: {
bind: function () {
this.$http.jsonp('http://djk8888.byethost32.com/VueAjax/jsonp.html', { jsonpCallback: "callback" }).then(function (res) {
for (var index in res.data) {
var sth = { id: res.data[index].id, name: res.data[index].name };
vv.peoples.push(sth);
}
}, function () {
console.log('请求失败处理');
});
},
}
});
</script>
</body>
</html>预览地址：http://djk8888.byethost32.com/VueAjaxJsonP/resource.html
axios(axios本身不支持调用jsonp，通过原生javascript的ajax来调用jsonp，当然也可以用jQuery来调用)：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vue.js Ajax(axios)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<th>编号</th>
<th>姓名</th>
</tr>
<tr v-for="people in peoples">
<td>{{people.id}}</td>
<td>{{people.name}}</td>
</tr>
</table>
</div>
<script>
var vv = new Vue({
el: "#app",
data: {
peoples: [],
},
created: function () {
this.bind();
},
methods: {
bind: function () {
js_ajax({
url: "http://djk8888.byethost32.com/VueAjax/jsonp.html", // 请求地址
jsonp: "callback", // 采用jsonp请求，且回调函数名为"jsonpCallbak"，可以设置为合法的字符串
data: {}, // 传输数据
success: function (data) { // 请求成功的回调函数
for (var index in data) {
var sth = { id: data[index].id, name: data[index].name };
vv.peoples.push(sth);
}
},
error: function (error) { } // 请求失败的回调函数
});
},
},
});
//原生javascript的ajax调用jsonp
function js_ajax(params) {
params = params || {};
params.data = params.data || {};
var json = params.jsonp ? jsonp(params) : json(params);
// jsonp请求
function jsonp(params) {
//创建script标签并加入到页面中
var callbackName = params.jsonp || params.jsonpCallback;
var head = document.getElementsByTagName('head')[0];
// 设置传递给后台的回调参数名
params.data['callback'] = callbackName;
var data = formatParams(params.data);
var script = document.createElement('script');
head.appendChild(script);
//创建jsonp回调函数
window[callbackName] = function (json) {
head.removeChild(script);
clearTimeout(script.timer);
window[callbackName] = null;
params.success && params.success(json);
};
//发送请求
script.src = params.url + '?' + data;
//为了得知此次请求是否成功，设置超时处理
if (params.time) {
script.timer = setTimeout(function () {
window[callbackName] = null;
head.removeChild(script);
params.error && params.error({
message: '超时'
});
}, time);
}
};
//格式化参数
function formatParams(data) {
var arr = [];
for (var name in data) {
arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
};
// 添加一个随机数，防止缓存
arr.push('v=' + random());
return arr.join('&');
}
// 获取随机数
function random() {
return Math.floor(Math.random() * 10000 + 500);
}
}
</script>
</body>
</html>预览地址：http://djk8888.byethost32.com/VueAjaxJsonP/axios.html
相关文章：
Vue.js Ajax(jQuery) | Vue.js Ajax(vue-resource) | Vue.js Ajax(axios) https://blog.csdn.net/djk8888/article/details/106012045
