JavaScript~ajax~百度搜索

来源：互联网发布：各国进出口贸易数据编辑：程序博客网时间：2024/06/04 23:27
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>百度搜索建议</title><script>/*接口地址：https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su* 参数* json=1* cb=getData* wd=html51) 键盘按下 生成script 请求数据 2）获取数据生成html(要用到全局函数)3）点击搜索跳转4）文字写入input的value; */document.addEventListener('DOMContentLoaded',()=>{let keyword = document.getElementById('keyword');let res = document.getElementById('res');let btn = document.querySelector('button');// console.log(keyword,res,btn)let script;let timer;//全局函数（获取数据生成html）jsonp需要全局函数window.getData = function(data){console.log(data);//可以为随意参数let ul = document.createElement('ul');ul.innerHTML = data.s.map(function(item){return `<li>${item}</li>`;}).join('');//每次输入前清除前一次的，避免生成多个ulres.innerHTML = '';res.appendChild(ul)}//键盘按下 生成script 请求数据 keyword.oninput = function(){// clearTimeout(timer)var _kw = keyword.value;//避免输入每个字符都请求一次，以至于请求过多timer = setTimeout(function(){// console.log(_kw);script = document.createElement('script');script.src = `https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?json=1&cb=getData&wd=${_kw}`;document.body.appendChild(script);},100)}//点击跳转btn.onclick = function(){let _kw = keyword.value;// console.log(_kw);location.href = `http://www.baidu.com/s?wd=${_kw}`;}//点击内容添加到inputres.onclick = function(e){let target = e.target;if (target.tagName.toLowerCase()=== 'li') {console.log(target.innerText);keyword.value = target.innerText;};}});</script></head><body><h1>百度搜索建议</h1><input type="text" id="keyword"><button>搜索</button><div id="res"></div></body></html>
阅读全文
0 0