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

最新推荐文章于 2021-12-08 18:43:47 发布

haoqi好奇

最新推荐文章于 2021-12-08 18:43:47 发布

阅读量286

点赞数 2

分类专栏：前端案例

本文链接：https://blog.csdn.net/qq_41956789/article/details/88828675

版权

前端同时被 2 个专栏收录

45 篇文章 1 订阅

订阅专栏

案例

26 篇文章 0 订阅

订阅专栏

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

准备三个文件

一：html页面

二：jquery.js文件

三:template-web.js文件

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

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

上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>百度搜索</title>
		<script src="jquery.js"></script>
		<!--引入template-web.js模板文件-->
		<script src="template-web.js"></script>
		<!--1.type="text/html" 2.要给模板配一个id。 循环出数据,有多少就循环出多-->
		
		<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里面 -->
		<div id="divResult">
			
		</div>
		
		
	</body>
</html>

实现效果

haoqi好奇

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跨域结合百度提示词接口实现搜索显示，arttamplate模板使用，jQuery跨域

今天做一个简单的百度提示词的跨域准备三个文件一：html页面二：jquery.js文件三:template-web.js文件template-web.js下载地址：https://www.awesomes.cn/repo/aui/arttemplate首先拿到百度提示词API参数上代码<!DOCTYPE html><html> &l...
复制链接

扫一扫