预览地址:http://djk8888.byethost32.com/VueAjax/
Vue.js Ajax(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: "json",
data: {},
url: "ajax.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/VueAjax/jQuery.html
Vue.js Ajax(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.get('ajax.html').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/VueAjax/resource.html
Vue.js Ajax(axios)
<!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 () {
axios({
url: 'ajax.html',
methods: 'GET',
params: {}
}).then(res =>{
for (var index in res.data) {
var sth = { id: res.data[index].id, name: res.data[index].name};
vv.peoples.push(sth);
}
});
},
}
});
</script>
</body>
</html>
预览地址:http://djk8888.byethost32.com/VueAjax/axios.html
ajax.html 页面的内容 :
[{"id":1,"name":"张三"},{"id":2,"name":"李四"},{"id":3,"name":"王五"},{"id":4,"name":"赵六"},{"id":5,"name":"田七"}]
预览地址:http://djk8888.byethost32.com/VueAjax/ajax.html
相关文章:
Vue.js AJAX 跨域调用 JSONP | jQuery | vue-resource | axios https://blog.csdn.net/djk8888/article/details/106217351