大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新…
- github:https://github.com/Daotin/Web
- 微信公众号:Web前端之巅
- 博客园:http://www.cnblogs.com/lvonve/
- CSDN:https://blog.csdn.net/lvonve/
在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!
之前我们发送Ajax请求的方式,一是原生的方式发送,二是通过jQuery来发送Ajax请求。
但是我们知道,在Vue里面是不推荐使用jQuery的,那么如何使用Vue来发送Ajax请求呢?
在Vue中可以使用第三方插件vue-resource
来实现Ajax请求的发送。
1、通过npm的方式在线安装:npm install vue-resource
2、在 github 中下载 vue-resource 的 文件 (在 dist 文件夹下有个 vue-resource.js 文件。)
3、使用 CDN。
参考链接:https://github.com/pagekit/vue-resource/blob/develop/docs/http.md
步骤:
1、在Vue.js之后引入vue-resource.js文件(因为vue-resource.js文件是依赖于Vue的)
2、全局使用:
then后面第一个参数是请求成功的回调函数;第二个参数是请求失败的回调函数。
获取到的结果在回调函数的参数中。
Vue.http.get('/someUrl', [config]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);
Vue.http.jsonp('/someUrl', [config]).then(successCallback, errorCallback);
3、局部使用:在methods的事件中,使用 this.$http.get/post/jsonp();
的形式发起请求。
this.$http.get('/someUrl', [config]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);
this.$http.jsonp('/someUrl', [config]).then(successCallback, errorCallback);
示例:通过三个按钮点击分别获取get,post,jsonp请求。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script src="./lib/vue-2.4.0.js">script>
<script src="./lib/vue-resource-1.3.4.js">script>
head>
<body>
<div id="box">
<input type="button" value="get请求" @click="getClick">
<input type="button" value="post请求" @click="postClick">
<input type="button" value="jsonp请求" @click="jsonpClick">
div>
<script>
var vm = new Vue({
el: " #box ",
data: {
},
methods: {
getClick() {
// 参数1:测试用的地址:http://vue.studyit.io/api/getlunbo
// 参数2:[config] 可选
this.$http.get("http://vue.studyit.io/api/getlunbo").then(result => {
console.log("ok");
console.log(result.body);
});
},
postClick() {
// 参数1:测试用的地址:http://vue.studyit.io/api/getlunbo
// 参数2:[data]数据,可为Object,FormData,String,这里为空
// 参数3:[config] 可选,但是emulateJSON = "true" 表名表单格式为:application/x-www-form-urlencoded,否则
// 可能有的浏览器不认识。
this.$http.post("http://vue.studyit.io/api/post", "", {
emulateJSON: true
}).then(result => {
console.log(result.body);
});
},
jsonpClick() {
this.$http.jsonp("http://vue.studyit.io/api/getlunbo").then(result => {
console.log(result.body);
});
}
}
});
script>
body>
html>
注意:获取到的数据在成功回调函数参数data的中,data是个对象,具体需要的数据是 data.body。
jsonp主要是为了解决跨域请求问题的。
我们知道,由于浏览器的安全性限制,不允许AJAX访问 协议不同、域名不同、端口号不同的数据接口,浏览器认为这种访问不安全。
但是,script标签src属性中的链接却可以访问跨域的js脚本,于是利用这种特性,我们让服务器不再返回数据,而是返回一段调用某个函数的js代码,然后在script中进行调用,就实现了跨域。
示例:使用JSONP,添加了一个script标签,标签的src指向了另一个域 www.xxx.com下的 jsonp.js 脚本。
<html>
<head>
<title>titletitle>
head>
<body>
<script type="text/javascript">
function jsonphandle(data){
alert("age:" + data.age + "name:" + data.name);
}
script>
<script type="text/javascript" src="jquery-1.8.3.min.js">
script>
<script type="text/javascript" src="http://www.xxx.com/jsopn.js">script>
body>
html>
要实现跨域,所以返回的 js 代码应该是一个函数的调用。www.xxx.com 下的 jsonp.js 代码如下:
jsonphandle({
"age" : 15,
"name": "John",
})
于是,结果就弹出对话框。
我们再改进一下,在script的src中传入的大多是后台文件,这里以php文件为例。
由于我们之前传入 js 文件只是想得到一个函数的调用而已,那么传入php文件怎么获取函数的调用呢?
<html>
<head>
<title>GoJSONPtitle>
head>
<body>
<script type="text/javascript">
function jsonphandle(data){
alert("age:" + data.age + "name:" + data.name);
}
script>
<script type="text/javascript" src="jquery-1.8.3.min.js">
script>
<script type="text/javascript">
$(document).ready(function(){
var url = "http://www.xxx.com/jsonp.php?id=1&callback=jsonphandle";
var obj = $('
你可能感兴趣的:(从零开始学,Web,开发,vue)