今天我们来看一下关于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>