在使用AngularJS $http.post()的时候,PHP如果通过$_POST来获取值,那么它获取到的将会是空值。而如果是用jquery来进行post传递,却不会这个问题。这是为什么呢?这是因为两者的post对header的处理有所不同。jQuery会把作为JSON对象的myData序列化,而AngularJS不会,所以PHP无法接受到这个值。而解决这个问题的方式有三种:
第一种:引入jquery,以此代替AngularJS。(不推荐)
第二种:在服务器端(PHP)通过 $params = json_decode(file_get_contents('php://input'),true); 获取参数,需要一个一个改,效率低下,后期维护问题也大。(不推荐)
第三种:修改Angular的$httpProvider的默认处理方式,具体操作:
我们只要在代码中添加下面代码的红色部分即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
<link rel="stylesheet" href="style/bootstrap.min.css">
<link rel="stylesheet" href="style/css.css">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/angular.min.js"></script>
}
</head>
<body ng-app="myApp">
<div class="container" ng-controller="formCtrl" style="margin-top: 80px;">
<h1 class="text-center" style="margin-bottom: 60px;">用户注册</h1>
<form class="form-horizontal" name="myForm" novalidate>
<div class="form-group">
<label class="col-sm-4 control-label">用户名:</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="name"
ng-model="user.name"
required>
<span class="text-warning" ng-show="myForm.name.$error.required">必填</span>
<span class="text-success" ng-show="myForm.name.$valid">正确</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">密码:</label>
<div class="col-sm-4">
<input type="password" class="form-control" name="pwd "
ng-model="user.pwd"
ng-minlength="4"
ng-maxlength="20"
required>
<span class="text-warning" ng-show="myForm.pwd.$error.required">必填</span>
<span class="text-danger" ng-show="myForm.pwd.$error.minlength">密码至少4位</span>
<span class="text-danger" ng-show="myForm.pwd.$error.maxlength">密码最长20位</span>
<span class="text-success" ng-show="myForm.pwd.$valid">正确</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">密码确认:</label>
<div class="col-sm-4">
<input type="password" class="form-control" name="repwd"
ng-model="user.pwd2"
required>
<span class="text-warning" ng-show="myForm.repwd.$error.required">必填</span>
<span class="text-warning" ng-show="myForm.repwd.$valid&&user.pwd2!=user.pwd">两次输入不一致</span>
<span class="text-success" ng-show="myForm.repwd.$valid&&user.pwd2==user.pwd">正确</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">手机号:</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="tel"
ng-model="user.tel"
ng-pattern="/^1[34578]\d{9}$/"
required>
<span class="text-warning" ng-show="myForm.tel.$error.required">必填</span>
<span class="text-danger" ng-show="myForm.tel.$error.pattern">无效手机号</span>
<span class="text-success" ng-show="myForm.tel.$valid">正确</span>
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-4 control-label">邮箱:</label>
<div class="col-sm-4">
<input type="email" class="form-control" name="email"
ng-model="user.email"
required>
<span class="text-warning" ng-show="myForm.email.$error.required">必填</span>
<span class="text-danger" ng-show="myForm.email.$error.email">邮箱不合法</span>
<span class="text-success" ng-show="myForm.email.$valid">正确</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-4 col-sm-offset-4">
<button type="submit" class="btn btn-success" style="width: 100%"
ng-click="add()"
ng-disabled="myForm.$invalid">提交</button>
</div>
</div>
</form>
</div>
<script>
var app = angular.module('myApp', []);
app.config(function($httpProvider) {
$httpProvider.defaults.transformRequest = function(obj) {
var str = [];
for (var p in obj) {
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
}
return str.join("&");
};
$httpProvider.defaults.headers.post = {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
app.controller('formCtrl', function($scope, $http) {
$scope.user = {
name: "",
pwd:"",
pwd2:"",
tel:"",
email:""
}
$scope.add = function() {
$http({
method: "post",
url: "http://localhost/demo2/index.php/home/user/add",
data: $scope.user
}).then(function(data){
console.log(data)
})
}
});
</script>
</body>
</html>