Angular.js学习笔记之关于数据请求遇到的坑

1.angularJS的$http.post请求,SpringMVC后台接收不到参数值的解决方案

问题一般为：400 Required String parameter 'rPassword' is not present 或其他400错误

解决方法 除了修改源码之外，可以采用这个方法，修改提交参数config的headers和transformRequest

(1) 创建一个全局的transformRequest function

var app = angular.module('myApp');

app.config(function ($httpProvider) {

   $httpProvider.defaults.transformRequest = function(data){

       if (data === undefined) {

           return data;

       }

       return $.param(data);

   }

});

然后为每一个方法或者创建一个全局的Content-Type header

$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';

(2) 为每一个需要的方法创建局部的transformRequest

var transform = function(data){       return $.param(data);   }   $http.post("/foo/bar", requestData, {       headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},       transformRequest: transform   }).success(function(responseData) {       //do stuff with response   });

2. scope.$apply的使用

问题一般为：数据双向绑定失效，就是明明在controller里面给$scope.×××赋值了，在页面上xxx愣是显示不了，但是点击一下输入框或是form表单的提交按钮，xxx数据信息就显示了，是不是好坑啊。

解决方法 ： 添加 $scope.$apply()

例子：

$scope.$apply(function(){   $scope.xxx = “你赋的值”;});

原因

一般情况下是不需要我们手动添加这一句代码的，因为angularJS本身在需要的时候调用，以达到我们所看到的数据双向绑定的效果。

但是你若是引用一个外部插件或者其他，在回调函数里创建或更新$scope.xxx的数据，因为外部插件本身已经脱离了angularJS的作用域，所以数据双向绑定在这里没有效果，只能手动添加$scope.$apply()来通知页面获取数据。

下面附上我的代码，希望对你有所帮助：

var app = angular.module('app', ["ngCookies"]);app.config(['$locationProvider', '$httpProvider',function($locationProvider,$httpProvider) {  $locationProvider.html5Mode(true);  $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=utf-8';  $httpProvider.defaults.transformRequest = function(data){    if (data === undefined) {        return data;    }    return $.param(data);  }}]);app.controller('pgsSignUp', ['$scope', '$location','$http','$cookieStore', function($scope, $location,$http,$cookieStore) {  if($cookieStore.get("id") == $location.search().data_shop_id){    $scope.isShop = true;  }  //获取见证信息  $http({      method: 'POST',      url: '/index.php/App/Pgs/getPgsInfo',      data: { 'pgs_id': $location.search().pgs_id}  }).then(function successCallback(response) {      $scope.data = response.data.value;      $scope.upload_host = upload_host;      $scope.time = {        start_time:$scope.data.start_time.substr(0,10),        end_time:$scope.data.end_time.substr(0,10)      }  });  //获取用户信息  $http({      method: 'POST',      url: '/index.php/App/User/getNowUser',  }).then(function successCallback(response) {    if(response.data.status == 1){        if(confirm("请先登录")){            $cookieStore.put('url',window.location.href);            window.location.href="/index.php/Weixin/login/login";        }        return;    }    $scope.user = {      name:'',      mobile: Number(response.data.value.mobile)    };  });  //提交确认报名  $scope.save  = function() {      $http({          method: 'POST',          url: '/index.php/Weixin/Pgs/addPgsUser',          data: { "name": $scope.user.name, "mobile": $scope.user.mobile,'pgs_id': $location.search().pgs_id}      }).then(function successCallback(response) {          if(response.data.status == 0){            window.location.replace("/index.php/Weixin/Pgs/success?pgs_id=" + $location.search().pgs_id );          } else{            alert(response.data.value);          }      });  };}]);