首先先将百度的搜索API进行分析,主要是分析他的通过页面传进去的参数,和回调函数名,以及服务器请求成功之后返回的数据
其实网上可以查到很多分析后的免费API比如天气预报,城市搜索等自己可以试试
注意:本例中 wd:代表输入的关键字即页面传给服务器的数据,cb:代表回调函数,data.s为返回的相关数据信息SR代表回掉函数名
最终实现的页面及功能如下:可以根据收入的关键字查找出对应信息,并动态绑定到页面上,并且可以点击链接到对应网页
用到的的语法有,
1:输入关键字后触发的键盘抬起事件onkeyup
2:``反隐号字符串解析方式的一种。
3:for each(function(){})遍历方法
4:动态创建script脚本进行跨域请求
主要代码如下
<body><img id="bai" src="./img/bd_logo1.png"><input id="du"><div id="div"><ul id="ul"><li id="li"></li></ul></div><script>var input=document.getElementById("du")var val;var ul=document.getElementById("ul")input.οnkeyup=function()//给input框绑定键盘抬起事件{val=this.value //获取关键字if(val) //如果输入框里有内容{var a=document.createElement("script")a.src=`/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${val}&cb=SR`; //字符串解析方式反引号document.body.appendChild(a)}}//函数名必须跟Cb的名字一样,因为请求发送过来的数据相当于函数,所以通过传参的方法获取数据,注意获取的是json字符串可以直接解析function SR(data){ //请求发送成功后返回的数据,//console.log(data) //获取的是jaon数据,是一串字符串{q: "1", p: false, s: Array(10)}//console.log( data.s)//一种方法获取的是所有数据相当于一个数组(10)["1688阿里巴巴批发网", "163", "12306", "163邮箱登陆", "126", "126邮箱登陆", "139邮箱登陆", "1688", "17173", "135编辑器"]//遍历所有的数据if(data.s) //如果有内容{ul.innerHTML=""ul.style.display="block"data.s.forEach(function(el){ //第一个参数是元素本身,第二个参数是索引,第三个参数是数组即对象//console.log(el)//对数组进行遍历获取每一个json里的数据//每次按键前清空ul里的内容//每次创建livar li=document.createElement("li")/*{}是个占位符*/li.innerHTML=`<a href="#">${el}</a>`//如果想要能跳转的链接则li.innerHTML=`<a href="/s?wd=${el}">${el}</a>` /* //注意写法是/s?直接跟wd而且没有cb*///将创建的li添加到ul中ul.appendChild(li)})}else{ul.style.display="none"}}//给input文本设置失焦input.οnblur=function(){ul.style.display="none"}//将获取的数据插入到页面上,即li上</script>