jQuery发送jsonp请求

原生jsonp和jQuery发送jsonp的方式出入比较大,所以想在这里记录一下jQuery发送jsonp请求的方式~~

文字版:

使用jQuery发送jsonp请求,主要使用jQuery函数的getJSON()方法,$.getJSON()。

需要传两个参数,第一个参数是url,需要添加url参数callback=?(固定写法),浏览器在发送请求时会自动为?赋值,这个值可以在后台接收,后台接收之后会将它作为函数调用的函数,接收方式会在稍后以实例说明。

;第二个参数是回调函数,指定形参(实参是后台响应的数据,是个json对象/数组),可以在函数体内部对响应数据进行处理

实例:

需求:点击发送jsonp请求按钮,后台响应的数据在div中显示

html:

<button>点击发送 jsonp 请求</button>
<div id="result"></div>

JS:

 <script src="../../bootstrap/js/jquery.min.js"></script>
    <script>
       
        $('button').click(function(){

            $.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?', function(data){
                $('#result').html('name: ' + data.name + '<br>' + 'age: ' + data.age)
            })
        })
    </script>

服务器:接收callback的值的方式request.query.callback

//jQuery-jsonp 服务
app.all('/jquery-jsonp-server' , (request , response)=>{
    
    const data = {
        name: 'Tom',
        age: 20
    }

    var str = JSON.stringify(data)

    //接收callback参数
    var cb = request.query.callback

    response.end(`${cb}(${str})`)
})

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值