Ajax——jQuery发送jsonp

最新推荐文章于 2024-07-16 10:45:38 发布

像费曼%

最新推荐文章于 2024-07-16 10:45:38 发布

阅读量318

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/weixin_53052268/article/details/126436236

版权

jQuery jsonp 服务端返回 div块数据展示

关键词由CSDN通过智能技术生成

Ajax 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1.需求：点击按钮向服务端请求数据，服务端返回的数据显示在div块中

2.代码展示

//jquery-jsonp.html
<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
       #result{
        width: 300px;
        height: 100px;
        background-color: antiquewhite;
       }
        
    </style>
</head>
<body>
    <button>点击发送jsonp请求</button>
    <div id="result">

    </div>
    <script>
        $('button').eq(0).click(function(){
            $.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?',function(data){
                // console.log(data)
                $('#result').html(`
                    名称：${data.name}<br/>
                    city:${data.city}
                `)
            })
        })
    </script>
</body>

//server.js
app.all('/jquery-jsonp-server',(request,response)=>{
 
    
    const data = {
        name:'hlr',
        city:['gz','mm']
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);

    //接收callback参数
    let cb = request.query.callback
    //end不会加特殊响应头
    response.end(`${cb}(${str})`)
})

3.代码结果展示