js使用jsonp请求渲染页面（搜索功能）

- 瑾♛年

已于 2024-01-04 17:49:48 修改

阅读量400

点赞数 6

文章标签： javascript 开发语言 ecmascript

于 2024-01-04 17:45:49 首次发布

本文链接：https://blog.csdn.net/qq_52840130/article/details/135392664

版权

本文详细介绍了如何使用HTML、CSS和JavaScript构建一个基本的搜索功能，以及利用JSONP进行动态数据获取的示例代码，展示了前端开发中的一种交互设计和技术应用。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.css">
<style>
*{
margin: 0;
padding: 0;
}
h1{
text-align: center;
margin: 20px 0;
}
div{
width: 500px;
margin: 0px auto;
margin-top: 50px;
display: flex;
}
button{
margin-left: 5px;
}
.list-group{
width: 500px;
margin: 5px auto;
}
</style>
</head>
<body>
<h1>搜索功能</h1>
<hr>
<div>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" autocomplete="off">
<button type="button" class="btn btn-primary">Search</button>
</div>
<ul class="list-group"></ul>
<script src="./js/jsonp.js"></script>
<script>
// 获取元素
const txt = document.querySelector('input')
const btn = document.querySelector('button')
const list_group = document.querySelector('.list-group')

function render(data){
const { s } = data
list_group.innerHTML = ''
s.forEach(item=>{
list_group.innerHTML += `
<li class="list-group-item">${item}</li>
`
})
}
function jsonp(url, query){
// 动态创建一个script标记
const script = document.createElement('script')
// 参数的处理
if(query){
let str = '?'
for(let key in query){
str += key + '=' + query[key]
str += '&'
}
str = str.slice(0, -1)
script.src = url + str
}else{
script.src = url
}
document.body.appendChild(script)
script.remove()
}
// 当点击搜索按钮的时候发送jsonp请求
btn.onclick = ()=>{
// 如果为空的情况下不让发送请求
if(txt.value.trim() === ''){
return
}
jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {cb: 'render', wd: txt.value})
}