angular成功提交表单数据后台却无法接收问题

     在使用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>


猜你喜欢

转载自blog.csdn.net/qq_35484341/article/details/67638026