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

2024-01-10 02:45:16

<!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})
? ? ? ? }

? ?</script>
</body>
</html>

文章来源:https://blog.csdn.net/qq_52840130/article/details/135392664
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。