$http implementiert das dynamische Dropdown-Feld für die Baidu-Suche-js-Tutorial-php.cn

$http implementiert das dynamische Dropdown-Feld für die Baidu-Suche

小云云

Freigeben： 2018-03-01 09:54:30

Original

1773 Leute haben es durchsucht

Dieser Artikel zeigt Ihnen hauptsächlich das Beispiel eines dynamischen Dropdown-Felds bei der Implementierung der Baidu-Suche mit angleJs-$http. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist. Folgen wir dem Herausgeber, um einen Blick darauf zu werfen. Ich hoffe, es kann allen helfen.

Das Beispiel lautet wie folgt:

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
   <meta charset="UTF-8">
   <title></title>
   <style type="text/css">
     p{
      overflow: hidden;
      margin-top: 50px;
      margin-left: 500px;
     }
     .container{
      width: 250px;
      padding: 0;
     }
     .container li{
      list-style: none;
      border: 1px dotted gray;
      width: inherit;
     }
   </style>
  </head>
  <body>
   <p ng-controller="myCtrl">
     <input type="text" ng-model="name" placeholder="请输入内容..." ng-keyup="change(name)"/>
     <input type="button" name="" id="" value="搜索" ng-click="change(name)"/>
     <ul class="container">
      <li ng-repeat=" d in mes">{{d}}</li>
     </ul>
   </p>
  </body>
  <script src="angular.min.js"></script>
  <script src="angular-route.min.js"></script>
  <script src="angular-ui-router.min.js"></script>
  <script type="text/javascript">
   var app = angular.module("myApp",[]);
   app.controller("myCtrl",function($scope,$http,$timeout){
     $scope.mes = [] ;
     var timer = null ;
     $scope.change = function(name){
      $timeout.cancel(timer);
      timer = $timeout(function(){
      
        $http({
        method:"JSONP",
        url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+name+"&json=1&p=3&sid=&req=2&csor=8&cb=JSON_CALLBACK"
        })
        .success(function(data){
         $scope.mes = data.s;
         console.log(data.s);
        })
      },500)
           
     }
   })
  </script>
</html>

Nach dem Login kopieren

Verwandte Empfehlungen:

angularjs verwendet $http, um die gemeinsame Nutzung von Excel-Dateien asynchron hochzuladen

$http-Dienstinhalt in AngularJS

Detaillierte Codeerklärung von AngularJS, die $http.post- und $http.get-Anfragen implementiert

Das obige ist der detaillierte Inhalt von$http implementiert das dynamische Dropdown-Feld für die Baidu-Suche. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!