当前位置：首页 > news >正文

【Ajax】笔记-JQuery发送jsonp请求

news 2025/6/23 2:49:35

前端

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery-jsonp</title><style>#result{width:300px;height:100px;border:solid 1px #089;}</style><script crossorigin="anonymous" src='https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js'></script>
</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){$('#result').html(`名称: ${data.name}<br>校区: ${data.city}`)});});</script>
</body>
</html>

crossorigin=“anonymous”:防止jQuery报错

点击按钮–发送请求返回结果在div中呈现

//jquery发送请求需要补充参数callback=? 固定写法用来跨域的

虽然我们填写的是？,但是有参数值的，服务端可以接收到这个参数，服务端把接收到的参数值，作为函数调用的函数去拼接字符串，也就是说jquery已经编写了一个函数了
在这里插入图片描述

服务

const {json
} = require('express');
const express = require('express')const app = express();app.get('/jquery-jsonp-server', function(requset, response) {const data = {name:'德仔',city:['北京','上海','广州']};//将数据转化为字符串let str = JSON.stringify(data);//返回结果 不可以是数据 j代码 end防止添加不知名的响应头 模板字符串是需要传递字符串的//``模板字符串 方便拼接//${str}这里的是对象//服务端接收callback的值let callback=requset.query.callback;response.end(`${callback}(${str})`);//返回函数的调用 然后进行解析处理})app.listen(9000, () => {console.log('9000启动成功')
})