angularjs post请求

来源：互联网发布：矩阵qr分解可以干什么编辑：程序博客网时间：2024/06/16 20:46

今天我们来看一下关于angularjs http中的post 请求

别的不说直接上一份代码我们根据代码来看吧

这是一个简单的通过bootstrap angularjs 实现查询天气的api

<!DOCTYPE html>
<html ng-app="myapp">
   <head>
       <meta http-equiv="Content-Type"   content="text/html:charset=utf-8"/>
       <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
       <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
       <style type="text/css">
       #head
       {
           width:700px;
           height:500px;
           margin-left:auto;
           margin-right:auto;
           margin-top:50px;

       }
       #bodyl
       {
           width:345px;
           height:100%;
           float:left;
       }
       #bodyr
       {
           width:345px;
           height:100%;
           float:right;
       }
       </style>
   </head>
   <body>
   <div class="container">
       <div id="head" ng-controller="customersCtrl">
           <div id="bodyl">
           <h3>城市:</h3><input type="text" class="form-control" placeholder="北京" ng-model="city" style="margin-top:25px;"></br>
           <button type="button" class="btn btn-primary" ng-click="IN()">确定</button>
           <button type="button" class="btn btn-success" ng-click="IN()">刷新</button>
           <ul class="list-group" style="margin-top:90px;">
               <li class="list-group-item list-group-item-danger"><h4>DAY</h4></li>
               <li class="list-group-item list-group-item-success"><h4>Day_Condition: {{detail.day_condition}}</h4></li>
                <li class="list-group-item list-group-item-info"><h4>Day_ Wind:{{detail.day_wind}}</h4></li>
               <li class="list-group-item list-group-item-warning"><h4>Day_Temperature: {{detail.day_temperature}}</h4></li>
           </ul>
           </div>
           <div id="bodyr">
           <ul class="list-group">
               <li class="list-group-item list-group-item-success"><h4>City: {{detail.city}}</h4></li>
                <li class="list-group-item list-group-item-info"><h4>Country: {{detail.county}}</h4></li>
               <li class="list-group-item list-group-item-warning"><h4>Date:{{detail.date}}</h4></li>
           </ul>
           <ul class="list-group" style="margin-top:68px;">
               <li class="list-group-item list-group-item-danger"><h4>Night</h4></li>
               <li class="list-group-item list-group-item-success"><h4>Night_Condition: {{detail.night_condition}}</h4></li>
                <li class="list-group-item list-group-item-info"><h4>Night_ Wind:{{detail.night_wind}}</h4></li>
               <li class="list-group-item list-group-item-warning"><h4>Night_Temperature:{{detail.night_temperature}}</h4></li>
           </ul>
           </div>
       </div>
   </div>
   </body>
   <script >
   //alert(3);
   var app=angular.module('myapp',[]);
   //alert(2);
   /*app.controller('customersCtrl',function($scope,$http)
   {
   //   alert(1);
       $http.post("http://api.1-blog.com/biz/bizserver/weather/list.do").success(function(response) {
           //$scope.sky=response['detail'][0];
           $scope.detail=response['detail'][0];
       });
   });*/
   app.controller('customersCtrl',function($scope,$http)
   {
       //var temp={'city':$scope.city};
       //alert(2);
       /*$http.post("http://api.1-blog.com/biz/bizserver/weather/list.do").success(function(response) {
           //$scope.sky=response['detail'][0];
           alert(1);
           $scope.temp=response['detail'][0];
       });*/
       //var temp=$scope.city;
       //alert(temp);
       $scope.IN=function()
       {
           var temp="成都";
           var temp=$scope.city; 取输入框中city的值
           $http({
               method:'POST',    //定义 method 为post
               url:'http://api.1-blog.com/biz/bizserver/weather/list.do', //发送请求的地址
               params   :{'city':$scope.city},   //发送的内容
               headers:{'Content-Type':'application/x-www-form-urlencode'}   //为http设置一个标头
           }).success(function(response)   //如果响应成功
           {
               $scope.detail=response['detail'][0]; 把返回值赋值给detail数组
           }).error(function(response) //响应失败
           {
               alert("error");
           });
       }
   });
   </script>
</html>

0 0