夺命雷公狗—angularjs—13—post参数的接收发送
2016-08-19 21:44
453 查看
我们强悍的angularjs为我们不仅仅提供了他的get接收方式,而且也有post的接收方式,我们现在做一个模拟接收后端传递过来的json的数据:
展示效果如下所示:
发送其实也很简单:
然后在后端测试下:
测试结果如下所示:
<?php $arr = ['user'=>'admin','pass'=>'admin888']; $arr = json_encode($arr); echo $arr;
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/amazeui.min.css"> <script src="js/jq2.js"></script> <script src="js/amazeui.min.js"></script> <script src="js/angular.min.js"></script> <style> .TextBlod { font-weight:bold; } .Red { color:red; } .Blue { color:blue; } .Bgred{ background:#dd514c; color:green; } .Bgblue{ background:#23ccfe; color:green; } .Oncss{ background:#000000; color:#ffffff; } </style> </head> <body ng-app="myapp"> <script type="text/ng-template" id="newlists"> <ul class="am-avg-sm-8" ng-repeat="c in data" ng-class-odd="Bgred" ng-class-even="Bgblue" ng-click="liClick($index)" ng-class="{true:'Oncss'}[$index == index]" > <li>{{$index}}</li> <li>{{c.name}}</li> <li ng-class="{true:'Red'}[c.age > 40]">{{c.age}}</li> <li>{{c.sex}}</li> <li ng-class="{true:'Red',false:'Blue'}[c.dang == 1]">{{c.dang == "1"? "是":"否"}}</li> <li>{{$first ? "是":"否"}}</li> <li>{{$last ? "是":"否"}}</li> <li ng-class="{true:'Red',false:'Blue'}[c.dang == 1]">{{$middle ? "是":"否"}}</li> </ul> <button type="button" ng-click="testCk()">主色按钮</button> </script> <ul class="am-avg-sm-8" ng-class="TextBlod" ng-controller="news"> <li>序号</li> <li>姓名</li> <li>年龄</li> <li>性别</li> <li>党员</li> <li>是否是首条</li> <li>是否是尾条</li> <li>不属于前尾</li> </ul> <ul class="am-avg-sm-8" ng-include src="'newlists'" ng-controller="news"> </ul> </body> <script> var app = angular.module('myapp',[]); app.controller('news',function($scope,$http){ $scope.TextBlod = 'TextBlod'; $scope.Red = 'Red'; $scope.Blue = 'Blue'; $scope.Bgred = 'Bgred'; $scope.Bgblue = 'Bgblue'; $scope.Oncss = 'Oncss'; $scope.data = ''; $http.get("data.txt").success(function(data,status,headers,config){ $scope.data = data.lists; //console.log(status); }); $http.get("data.txt").error(function(data,status,headers,config){}); $scope.testCk = function(){ $http.post('data.php').success(function(data,state){ console.log(data); }); //alert('tttt'); } $scope.liClick = function(index){ $scope.index = index; } }); </script> </html>
展示效果如下所示:
发送其实也很简单:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/amazeui.min.css"> <script src="js/jq2.js"></script> <script src="js/amazeui.min.js"></script> <script src="js/angular.min.js"></script> <style> .TextBlod { font-weight:bold; } .Red { color:red; } .Blue { color:blue; } .Bgred{ background:#dd514c; color:green; } .Bgblue{ background:#23ccfe; color:green; } .Oncss{ background:#000000; color:#ffffff; } </style> </head> <body ng-app="myapp"> <script type="text/ng-template" id="newlists"> <ul class="am-avg-sm-8" ng-repeat="c in data" ng-class-odd="Bgred" ng-class-even="Bgblue" ng-click="liClick($index)" ng-class="{true:'Oncss'}[$index == index]" > <li>{{$index}}</li> <li>{{c.name}}</li> <li ng-class="{true:'Red'}[c.age > 40]">{{c.age}}</li> <li>{{c.sex}}</li> <li ng-class="{true:'Red',false:'Blue'}[c.dang == 1]">{{c.dang == "1"? "是":"否"}}</li> <li>{{$first ? "是":"否"}}</li> <li>{{$last ? "是":"否"}}</li> <li ng-class="{true:'Red',false:'Blue'}[c.dang == 1]">{{$middle ? "是":"否"}}</li> </ul> <button type="button" ng-click="testCk()">主色按钮</button> </script> <ul class="am-avg-sm-8" ng-class="TextBlod" ng-controller="news"> <li>序号</li> <li>姓名</li> <li>年龄</li> <li>性别</li> <li>党员</li> <li>是否是首条</li> <li>是否是尾条</li> <li>不属于前尾</li> </ul> <ul class="am-avg-sm-8" ng-include src="'newlists'" ng-controller="news"> </ul> </body> <script> var app = angular.module('myapp',[]); app.controller('news',function($scope,$http){ $scope.TextBlod = 'TextBlod'; $scope.Red = 'Red'; $scope.Blue = 'Blue'; $scope.Bgred = 'Bgred'; $scope.Bgblue = 'Bgblue'; $scope.Oncss = 'Oncss'; $scope.data = ''; $http.get("data.txt").success(function(data,status,headers,config){ $scope.data = data.lists; //console.log(status); }); $http.get("data.txt").error(function(data,status,headers,config){}); $scope.testCk = function(){ $http.post('data.php',[ user = 'useradmin', pass = 'useradmin888' ]).success(function(data,state){ console.log(data); }); //alert('tttt'); } $scope.liClick = function(index){ $scope.index = index; } }); </script> </html>
然后在后端测试下:
测试结果如下所示:
相关文章推荐
- 夺命雷公狗—angularjs—12—get参数的接收
- AngularJs中$http发送post或者get请求,SpringMVC后台接收不到参数值的解决办法
- AngularJs中$http发送post或者get请求,SpringMVC后台接收不到参数值的解决办法
- 后端接收不到AngularJs中$http.post发送的数据的问题
- 关于AngularJs中$http post、get 发送和接受参数详解
- 后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
- axios发送post请求springMVC接收不到参数的解决方法
- axios发送post请求springMVC接收不到参数
- 解决 AngularJs $http 发送post,get请求,SpringMvc无法接受参数的问题。
- AngularJs的$http发送POST请求,php无法接收Post的数据解决方案
- angularJS post请求后台接收不到参数
- Angular13 Angular2发送PUT请求在后台接收不到参数
- PHP后端接收不到AngularJs中$http.post发送的数据的问题
- 后端接收不到AngularJs中$http.post发送的数据的问题
- 后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
- HttpURLConnection post 发送参数及图片 及接收测试
- 关于HttpClient 发送Post请求带string参数,接收乱码问题
- 以post方式携窗体等参数向服务器发送请求 发出去的字节流 返回的内容
- 关于POST网页参数接收返回值
- Java网络编程(13):使用Socket类接收和发送数据