除了vue-resource之外， 还可以用AXIOS的第三方包来实现 数据的请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<!--vue-resource依赖于vue 先后顺序要注意-->
<script src="js/vue-resource.js"></script>
<!--this.$http.方法-->
</head>
<body>
<div id="app">
<input type="button" value="get请求" @click="getInfo">
<input type="button" value="post请求" @click="postInfo">
<input type="button" value="jsonp请求" @click="jsonpInfo">
</div>
</body>
<script>
var vm=new Vue({
el:"#app",
data:{},
methods:{
getInfo(){
this.$http.get('http://www.liulongbin.top:3005/api/getprodlist').then (function (result) {
console.log(result)
})
},
postInfo(){//发起post请求 application/x-www-form-urlenconded
//手动发起的post请求，默认没有表单格式，所以，有的服务器处理不了
//通过设置 post方法的第三个参数 设置提交方式为一个表单方式
this.$http.post('http://www.liulongbin.top:3005/api/getprodlist',{/*提交的数据*/},{/*数据的格式*/emulateJSON:true}).then(function (result) {
console.log(result.body)
})
},
jsonpInfo(){
//发起JSONP请求
this.$http.jsonp('http://www.liulongbin.top:3005/api/getprodlist').then(result=>{
console.log(result.body)
})
}
}
})
</script>
</html>
JSONP原理
由于浏览器的限制， 不允许AJAX访问，协议不同，域名不同，端口号不同的数据接口，浏览器认为这种访问不安全
通过动态创建script标签的形式，当做引入脚本
当引入一个JS脚本的时候 会在请求的时候定义一个callback 后端帮我们把需要的数据当做参数传到这个callback函数中，然后在前台调用我们已经准备好的callback函数，通过参数 我们就能拿到后端传回来的数据
NODE代码
const http=require("http")
const urlModule=require("url")
const sever=http.createServer()
sever.on('request',function(req,res){
//const url=req.url;
const {pathname:url, query }=urlModule.parse(req.url,true)
if(url ==='/getscript'){
//拼接一个合法的JS脚本，这里拼接的是一个方法的调用
//通过res.end发送给客户端
var data={
name:"xjj",
age:18,
gender:"女孩子"
}
console.log(query.callback)
var scriptStr=`${query.callback}(${JSON.stringify(data)})`
res.end(scriptStr)
console.log(scriptStr)
}else{
res.end('404')
}
})
sever.listen(3000,'127.0.0.1')
前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function showInfo (data){
console.log('OK')
console.log(data);
}
</script>
<script src="http://127.0.0.1:3000/getscript?callback=showInfo"></script>
</body>
</html>
网友评论