vue-resource 实现get post jsonp请求

作者: A_9c74 | 来源:发表于2018-11-06 22:05 被阅读0次

day02-vuejs-vue-resource实现get, p
11，在Vue中发起ajax请求
vue-resource 实现get post jsonp请求
vue-resource实现get、post、jsonp请求
【JavaScript】ajax跨域发送POST
lesson35-JSONP
跨域
Vue 实现POST数据，并请求数据
请求
Angular基础（下）

除了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>