JSONP基础知识详解(2)

<?php function test_input($data) { $data = trim($data); $data = stripslashes($data); $data = htmlspecialchars($data); return $data; } $arr = [1,2,3,4,5]; echo test_input($_GET['callback']) ."(" .json_encode($arr) .");"; ?>

百度搜索框

百度搜索框就是使用了JSONP的技术,在百度搜索的URL中,有用的查询如下

结果为:

a({q:"123",p:false,s:["12306","12306铁路客户服务中心","12308汽车订票官网","12306火车票网上订票官网","12333","12315","12345","12333社保查询网","123网址之家","12366"]});

所以,wd为关键词,cb用来JSONP的函数名。在获取的数据中,s为以关键词开始的数据组成的数据

百度搜索的关键URL如下

wd为关键词,当wd=a时,将打开关键词为a的网页

<style> body{margin: 0;} ul{margin: 0;padding: 0;list-style: none;} a{color:inherit;text-decoration: none;} input{padding: 0;border: 0;} .box{width: 340px;height: 38px;border: 2px solid gray;} .con{overflow: hidden;} .input{float: left;width: 300px;height: 38px;} .search{width: 38px;height: 38px;float: right;background: url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/search.png') 0 -38px;} .list{position: absolute;width: 298px;border: 1px solid #e6e8e9; overflow: hidden;} .in{line-height: 30px;border-bottom: 1px solid lightblue;cursor:pointer;text-indent: 1em;} .list .in:last-child{margin-bottom: -1px;} .in:hover{background-color: #f9f9f9;} </style> <div> <div> <input> <a target="_blank" href="javascript:;"></a> </div> <ul></ul> </div> <script> function loadScript(url){ loadScript.mark = 'load'; var script = document.createElement("script"); script.type = "text/javascript"; script.src = url; document.body.appendChild(script); } function callback(data){ if(data){ var arr = data.s; var html = ''; for(var i = 0,len = arr.length; i < len; i++){ html+= "<li><a href='https://www.baidu.com/s?wd="+ arr[i]+"' target='_blank'>" + arr[i]+ "</a></li>" } list.innerHTML = html; } } search.onkeyup = function(e){ e = e || event; if(e.keyCode == '13'){ window.open('https://www.baidu.com/s?wd=' + this.value); } if(this.value){ if(search.data != this.value){ btn.setAttribute('href','https://www.baidu.com/s?wd=' + this.value); var that = this; loadScript("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + that.value + "&&cb=callback"); } }else{ list.innerHTML = ''; } search.data = this.value; } search.onclick = function(e){ e = e || event; list.style.display = 'block'; if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble = true; } } document.onclick = function(){ list.style.display = 'none'; } </script>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwwwfw.html