angular简单爬取百度搜索内容提示

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度搜索</title>
  //引入相关插件

  <script src="https://cdn.bootcss.com/angular.js/1.3.8/angular.js"></script>
  <script src="https://cdn.bootcss.com/angular.js/1.3.8/angular-animate.min.js"></script>
  <style type="text/css">
    .box{transition: all 0.5s;width: 200px;background: #669900;}
    .box.ng-enter{opacity:0;}
    .box.ng-enter-stagger{animation-delay: .25s;}
    .box.ng-enter-active{opacity:1;}
    .box.ng-leave{opacity:1;}
    .box.ng-leave-stagger{animation-delay: .25s;}
    .box.ng-leave-active{opacity:0;}
  </style>
</head>
  <body ng-app="pro" ng-controller="demo">
    <input type="text" ng-model="Open" ng-change="writ()"/>
    <input type="button" value="搜索" />
    <ul>
      <li ng-class="{box:true}" ng-repeat="data in dataList track by $index" >{{data}}</li>
    </ul>

  <script type="text/javascript">
    var m1 = angular.module("pro",["ngAnimate"])
    m1.controller("demo",function($scope,$http){
    $scope.writ = function(Open){
    $http({
      method:"JSONP",
      url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?                              wd="+$scope.Open+"&cb=JSON_CALLBACK",
    }).success(function(data){

    $scope.dataList = data.s
    console.log($scope.dataList)
  })
 }

})
</script>
</body>
</html>

posted @ 2017-06-03 16:26  小菜波  阅读(272)  评论(0编辑  收藏  举报