index.html
<body>
<button>点击发送jsonp请求</button>
<div id="result"></div>
</body>
<script>
$("button")
.eq(0)
.click(function () {
// url 里面这个 callback 参数是必填的
$.getJSON(
"http://127.0.0.1:8000/jquery-jsonp-server?callback=?",
function (data) {}
);
});
</script>
本地服务器
const express = require('express')
const app = express()
app.get('/jquery-jsonp-server', (request, response) => {
const data = {
name: '于家宝'
}
// 将数据转为字符串
let str = JSON.stringify(data)
// 返回结果
response.end(`handle(${str})`)
})
app.listen(8000, () => {
console.log('服务已经启动,端口号是8000....');
})
先点击一下试试看
此时会发现写的时候url后面拼接的callback是个问号 ,但是发送的时候是有值的
服务端是可以把这个参数接收到的,接收到以后会把这个值作为调用的函数名
const express = require('express')
const app = express()
app.get('/jquery-jsonp-server', (request, response) => {
const data = {
name: '于家宝'
}
// 将数据转为字符串
let str = JSON.stringify(data)
// 接收callback
let cb = request.query.callback
// 返回结果
response.end(`${cb}(${str})`)
})
app.listen(8000, () => {
console.log('服务已经启动,端口号是8000....');
})
此时点击按钮,会发现值已经放上去了作为会点函数名
此后就是调用这个方法,把值放在 result 盒子里
$("button")
.eq(0)
.click(function () {
// url 里面这个 callback 参数是必填的
$.getJSON(
"http://127.0.0.1:8000/jquery-jsonp-server?callback=?",
function (data) {
$('#result').html(`${data.name}`)
}
);
});