众所周知,跨域搜索依托于“ 请求数据 ”和“ 回调 ”。
本节所用为网址key检索,如下:
https://www. baidu.com/ sugrec?pre=1 &p=3& ie=utf-8&. json=1 &prod=pc&from=pc_ web&sugsid=2453, 1420, 21100, 29523, 29519, 28519, 29099. 29567, 28835, 29221 &wd=%E5%BO%8F&r eq=2&bs=%E7%99%BE%E5%BA%A6%E7%BD%91%E7%9B%98&pbs=%E7%99%BE%E5%BA%A6%E7%BD%91 %E7%9B%98&csor=7&pwd=f sdf sd&cb= jQuery11020948129769730276_ 1 563796355272&_ =1563796355292
我们以这个网址为例(这是我在百度搜索处输入111控制台返回的结果),略微分析一下 HTTP :
网址:https://www.baidu.com -> 指向一个服务器地址
(什么是服务器?这个自己百度一下吧,,,)
url:统一资源定位符 路径
uri:统一资源描述符 对于资源名称的描述
众所周知,URL是URI的子集,让我们先了解一下绝对URI的格式:
查询字符串项,又叫“ 传参 ”,多个参数中间用 & 分隔。
又比如:
window.location.host; //返回url 的主机部分
window.location.hostname; //返回服务器地址(域名)
window.location.href; //返回整个url字符串(在浏览器中就是完整的地址栏)
window.location.pathname; //返回path
window.location.protocol; //返回协议名
window.location.port; //url 的端口
window.location.search; //传参
资源? > 页面 json、xml、css、img …
?wd=1&fs=45&a=5454 > 参数:键值对 key=value
参数作用:需要后端说明
wd:string — 用户所输关键字!
cb:string — 回调函数名称!
yes!你没看错,其实网址cb处好像是一个函数的形式呢~~
先看最终效果:
OK,步入正题:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度跨域搜索-搜索关键字讲解</title>
<style>
*{
margin: 0;
padding: 0;
}
input{
display: block;
width: 500px;
height: 30px;
margin: 150px auto 0;
}
ul{
list-style-type: none;
width: 500px;
margin: 0 auto;
border: 1px solid #ccc;
}
li{
font-size: 14px;
line-height: 30px;
text-indent: 10px;
cursor: pointer;
}
li:hover{
background: #e9e9e9;
cursor: pointer;
}
</style>
</head>
<body>
<label>
<input type="text" onkeyup="query(this)" />
</label>
<ul>
<!--<li></li>--> <!-- 这里为啥不用li,因为我们这里需要的不是固定的li列表 -->
</ul>
</body>
</html>
HTML+css很简单,也不是重点,这里就不再多说,唯一需要注意的一点:我们没有用li标签!
为什么? 列表需要js动态渲染!
<script>
//定义一个函数query,搜索关键字相关的补全操作
function query(_this) {
//console.log(this); //这里的this是谁?执行这个函数的人——这里会打印window,因为我们这个函数时定义在全局里面的
//console.log(_this); //参数,接上HTML中的query(this)函数传参调用,所以我们重新以参数的形式传入this(加了下划线),这样以后,指向的就是input了
var key=_this.value; //获取文本框的内容
var script=document.createElement('script'); //这一步的用意:我们本应将网址链接以scrip标签的形式引入
script.src='https://www.baidu.com/sugrec?prod=pc&wd='+key+'&cb=mxc';
document.body.appendChild(script);
//接口——即 URL地址
}
function mxc(data) {
document.getElementsByTagName('ul')[0].innerHTML=''; //清空原始内容
//如何找? console.log(data.g)——打开控制台,发现data的g属性被用于保存jsonp数据
data.g.forEach(function (el) { //el代表所访问到的元素
var oli=document.createElement('li');
oli.innerHTML=el.q; //g数组中的q属性代表了每一个li
document.getElementsByTagName('ul')[0].appendChild(oli);
});//遍历数组
}
</script>
第8行:即为百度搜索引擎接口,我们将key保存用户输入的内容,然后在后面的回调函数里调用!
( 注意看第二个函数的函数名和第8行中最后的名称 )
我们在回调函数中的data,就是key值,也就是在输入框里输入的内容!
此时打开14行和控制台(直接在控制台log也行),会发现有一个jsonp格式的data,将其打开,其中的g(数组形式)内容就是所谓的“关联内容”(ul > li)
这里我只是实现了简单的关键词检索,还有跳转功能,就靠大家自己琢磨了,,,
扩展
常用的表单文字跳转(HTML版):
<form class="xxx" action="https://cn.bing.com/search">
</form>