异步问题
ajax异步请求数据完数据后给$scope赋值的时候需要检查$scope的数据更新没有。要不然无法绑定数据。
<!DOCTYPE html> <html ng-app="test_ajax"> <head> <meta charset="utf-8"> <title></title> <script src="angular.js" charset="utf-8"></script> <script src="jquery.js"></script> <script> let mod=angular.module('test_ajax', []); mod.controller('main', function ($scope){ $.ajax({ url: 'arr.txt', dataType: 'json', success(res){ $scope.arr=res; $scope.$apply(); //检查 }, error(){ alert('错了'); } }); }); </script> </head> <body ng-controller="main"> <ul> <li ng-repeat="a in arr">{{a}}</li> </ul> </body> </html>
$scope.$apply(); //检查
angularjs方法Post方法请求数据
<!DOCTYPE html> <html ng-app="test"> <head> <meta charset="utf-8"> <title></title> <script src="angular.js" charset="utf-8"></script> <script> let mod=angular.module('test', []); mod.config(function ($httpProvider){ $httpProvider.defaults.transformRequest=function (obj){ let arr=[]; for(let name in obj){ arr.push(`${name}=${obj[name]}`); } return arr.join('&'); }; $httpProvider.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded'; }); mod.controller('main', function ($scope, $http){ $scope.calc=function (){ $http({ method: 'POST', url: '1.php', data: { a: $scope.a, b: $scope.b } }).then(res=>{ alert(res.data); }, ()=>{ alert('错了'); }); }; }); </script> </head> <body ng-controller="main"> <input type="text" ng-model="a"> <input type="text" ng-model="b"> <input type="button" value="计算" ng-click="calc()"> </body> </html>
为啥POST出问题
AngularJS用的是 application/json 的编码格式大多浏览器不认， 编码格式改成application/x-www-form-urlencoded的编码格式。
angularjs方法get方法请求数据
<!DOCTYPE html> <html ng-app="test_ajax"> <head> <meta charset="utf-8"> <title></title> <script src="angular.js" charset="utf-8"></script> <script> let mod=angular.module('test_ajax', []); mod.controller('main', function ($scope, $http){ $http.get('arr.txt').then((res)=>{ $scope.arr=res.data; }, (err)=>{ alert('错了'); }); }); </script> </head> <body ng-controller="main"> <ul> <li ng-repeat="a in arr">{{a}}</li> </ul> </body> </html>