本文内容过于简陋，只是单纯的记录一下 JSONP 的练习代码：
index.html
代码语言：html复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSONP练习</title>
<script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<input type="text" placeholder="请输入要搜索的内容"/>
<ul></ul>
<script>
/*
jQuery1102031111030815926477_1559740511411(
{
"q":"i",
"p":false,
"g":[
{"type":"sug","sa":"s_1","q":"ins"},
{"type":"sug","sa":"s_2","q":"iphone"},
{"type":"sug","sa":"s_3","q":"ig"},
{"type":"sug","sa":"s_4","q":"iphone x"},
{"type":"sug","sa":"s_5","q":"ieee"},
{"type":"sug","sa":"s_6","q":"iu"},
{"type":"sug","sa":"s_7","q":"it"},
{"type":"sug","sa":"s_8","q":"ipo"},
{"type":"sug","sa":"s_9","q":"ipad"},
{"type":"sug","sa":"s_10","q":"ipados"}
]
}
);
https://www.baidu.com/sugrec?prod=pc&from=pc_web&wd=i&cb=jQuery1102031111030815926477_1559740511411
*/
let $ul = $("ul");
$("input").on("input", function () {
// console.log(this.value);
$.ajax({
url: "https://www.baidu.com/sugrec?prod=pc&from=pc_web&wd=" this.value,
data: {
"teacher": "BNTang",
"age": 34
},
// 告诉jQuery需要请求跨域的数据
dataType: "jsonp",
// 告诉jQuery服务器在获取回调函数名称的时候需要用什么key来获取
jsonp: "cb",
success: function (msg) {
// console.log(msg);
createItems(msg.g);
}
});
});
function createItems(list) {
$("ul>li").remove();
for (let i = 0; i < list.length; i ) {
let $li = $("<li>" list[i].q "</li>");
$ul.append($li);
}
}
</script>
</body>
</html>我正在参与2023腾讯技术创作特训营第二期有奖征文，瓜分万元奖池和键盘手表
