跨域结合百度提示词接口实现搜索显示，arttamplate模板使用，jQuery跨域

╰+哭是因爲堅強的太久メ 2021-09-18 15:00 312阅读 0赞

今天做一个简单的百度提示词的跨域

准备三个文件

一：html页面

二：jquery.js文件

三:template-web.js文件

template-web.js下载地址：[https://www.awesomes.cn/repo/aui/arttemplate][https_www.awesomes.cn_repo_aui_arttemplate]

首先拿到百度提示词API参数

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70][]

上代码

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>百度搜索</title>
    		<script src="jquery.js"></script>
    		
    		<script src="template-web.js"></script>
    		
    		
    		<script type="text/html" id="resultTemplate">
    			<ul>	
    			{
       {each s  value i}}
    			<li>
    				<span>结果{
       {i+1}}</span>
    				<span>{
       {value}}</span>
    			</li>
    			{
       {/each}}
    			</ul>
    		</script>
    	</head>
    	<body>
    		<h2>百度关键词搜索</h2>
    		<script>
    			
    			window.onload=function(){
    				var btn=document.querySelector("#btn");
    				btn.onclick=function(){
    					//找到输入框,获得用户所输入的值
    					var keyValue=document.querySelector("#keyValue").value;
    					//dataType:"jsonp" 决定了使用跨域的数据请求
    					//jsonp:"cb" 设置回调函数
    					$.ajax({
    						url:"http://suggestion.baidu.com/su",
    						data:{wd:keyValue},
    						jsonp:"cb",
    						dataType:"jsonp",
    						success:function(data){
    						   console.log(data);
    						   //与模板id进行连接
    						   var html=template("resultTemplate",data);
    						   //设置内容显示在哪里 
    						   var divResult=document.querySelector("#divResult");
    						   divResult.innerHTML=html;
    						}
    					});
    				}
    			}
    			
    		</script>
    		
    			<input type="text" placeholder="请输入要搜索的内容" id="keyValue" />
    			<input type="button" value="搜索" id="btn" />
    	
    		
    		<div id="divResult">
    			
    		</div>
    		
    		
    	</body>
    </html>

实现效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70 1][]

[https_www.awesomes.cn_repo_aui_arttemplate]: https://www.awesomes.cn/repo/aui/arttemplate
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70]: /images/20210724/00d4ecf3050a408caadd0d7215eef010.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70 1]: /images/20210724/bcfd1a4c4c9341ed9ac611c37992822f.png