angularjs实现百度的搜索接口及链接的实现

最新推荐文章于 2020-10-13 17:25:41 发布

Web攻城狮

最新推荐文章于 2020-10-13 17:25:41 发布

阅读量2.4k

点赞数 2

分类专栏： angularjs 文章标签： angularjs 百度的搜索接口连接的跳转 http jsonp

本文链接：https://blog.csdn.net/b1244154318/article/details/52628355

版权

angularjs 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

angularjs实现百度的搜索接口及链接功能

<!DOCTYPE html>
<html ng-app="myApp">
	<head>
		<meta charset="UTF-8">
		<title>搜索</title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			#wei{
				width:500px;
				height:600px;
				margin:0 auto;
				border:0px solid gray;
			}
			#wei input{
					width:476px;
					height:50px;
					line-height: 50px;
					padding-left:20px;
					font-size: 16px;
			}
			#wei ul {
				height:auto;
				border:1px solid #ccc;
			}
			#wei ul li{
					width:100%;
					height:30px;
					line-height: 30px;
					text-indent:10px;
					font-size: 16px;
					list-style: none;
			}
			#wei ul li a{
					text-decoration:none;
			}
			#wei ul li:hover{
				display:block;
				background:#ccc;
				color:#fff;
			}
		</style>
	</head>
	<body ng-controller="show">
			<div id="wei">
				<input type="text" ng-model="data" ng-keyup="change(data)" >
				<ul><!-- 添加链接 -->
					<li ng-repeat="attr in arr"><a href="https://www.baidu.com/s?wd={{attr}}">{{attr}}</a></li>
				</ul>
			</div>
		<script src="angular.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app = angular.module('myApp',[]);
			app.controller('show',['$scope','$http',function($scope,$http){
				$scope.arr=[];
				$scope.change = function(data){
					//进行请求
					$http({
						"method":"jsonp",
						"url":"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+$scope.data+"&cb=JSON_CALLBACK"
						//回调函数必须为JSON_CALLBACK,百度默认的
					}).success(function(res){//数据请求成功时返回数据
						$scope.arr=res.s;
					})
					}
			}]);
		</script>	
	</body>
</html>

Web攻城狮

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
angularjs实现百度的搜索接口及链接的实现

angularjs实现百度的搜索接口及链接功能搜索 *{ margin:0; padding:0; } #wei{ width:500px; height:600px; margin:0 auto; border:0px solid gray; } #wei input{ width
复制链接

扫一扫

专栏目录