Angular學(xué)習(xí)筆記之ng表單驗(yàn)證

本人即將大四腰根，小白一個(gè)，這是第一次在學(xué)習(xí)論壇上寫點(diǎn)東西，因?yàn)橄腽B(yǎng)成一個(gè)隨時(shí)記錄自己學(xué)習(xí)進(jìn)程的好習(xí)慣。因?yàn)楣纠锸褂玫氖茿ngular童社，so斷斷續(xù)續(xù)學(xué)習(xí)了半個(gè)月左右，現(xiàn)在到了檢驗(yàn)的時(shí)候柬唯。

一些Angular基礎(chǔ)的標(biāo)簽我就不說了揭北，先從我比較感興趣也是比較簡單的表單驗(yàn)證開始入門吧。

（大神就還是不要往下看啦0.0）

首先之碗，構(gòu)建的表單幾點(diǎn)要求：

1.確保form上標(biāo)簽有一個(gè)name屬性蝙眶，像下面的例子一樣。最好再加一個(gè)novalidate=”novalidate”褪那，此屬性是為了驗(yàn)證表單時(shí)禁止使用表單自身的驗(yàn)證方法幽纷；

2.form中不能有action屬性，提交交由ng-submit處理（我這里好像是直接改成了ng-click）博敬；

3.每個(gè)input一定要有ng-model友浸，最好有一個(gè)name方便引用。然后用require或者ng-minlength之類才起作用偏窝；

4.novalidate="novalidate"收恢，關(guān)閉原有的html5表單驗(yàn)證；

先上幾張截圖：


登錄界面

登錄界面的驗(yàn)證有：所有字段的空驗(yàn)證囚枪，合法性驗(yàn)證派诬，位數(shù)驗(yàn)證等；用戶名和密碼在angular控制器中與后臺數(shù)據(jù)庫交互链沼，簡單的判斷是否存在該用戶默赂；

注冊界面

注冊界面驗(yàn)證：所有字段的空驗(yàn)證，合法性驗(yàn)證括勺，位數(shù)驗(yàn)證等缆八；用戶名在controller中驗(yàn)證是否數(shù)據(jù)庫中存在相同的用戶名曲掰；兩次密碼的輸入是否一致等；

因?yàn)槭呛芎唵蔚木毷謉emo奈辰，代碼也就沒那么規(guī)范啦：)

代碼區(qū)

test19.html ? ? ? ?//登錄界面

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>angular驗(yàn)證 ?前臺登錄頁面</title>

<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet">

<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div class="container" style="width: 600px;border: 1px solid #cccccc;box-shadow: 0 0 10px 3px #cccccc;margin-top: 150px;">

<form class="form-horizontal" name="form" ng-app="myApp" ng-controller="myCtrl" ng-submit="submitForm(form.$valid)" novalidate="novalidate">

<h2 class="col-sm-offset-2 col-sm-10">表單驗(yàn)證</h2>

<div class="form-group has-feedback" ng-class="{ 'has-error' : form.user.$invalid && form.user.$dirty || userValidate=='false' , 'has-success' : form.user.$valid && form.user.$dirty && (userValidate=='' || userValidate=='true') }">

<label for="user" class="col-sm-2 control-label">用戶名：</label>

<div class="col-sm-5">

<input type="text" class="form-control" name="user" id="user" ng-model="user" ng-minlength="3" ng-maxlength="8" required="required" />

<span class="glyphicon glyphicon-ok form-control-feedback" ng-show="form.user.$dirty && form.user.$valid && (userValidate=='' || userValidate=='true')" aria-hidden="true"></span>

<span class="glyphicon glyphicon-remove form-control-feedback" ng-show="form.user.$dirty && form.user.$invalid || userValidate=='false'" aria-hidden="true"></span>

</div>

<span class="col-sm-5" ng-show="form.user.$dirty && form.user.$invalid">

<span class="help-block" ng-show="form.user.$error.required">用戶名是必須的</span>

<span class="help-block" ng-show="form.user.$error.minlength">your name is too short!</span>

<span class="help-block" ng-show="form.user.$error.maxlength">your name is too long!</span>

</span>

<span class="col-sm-5" ng-show="form.user.$dirty && form.user.$valid">

<span class="help-block" ng-show="form.user.$valid && userValidate!='false'">OK</span>

<span class="help-block" ng-show="userValidate=='false'">用戶名或密碼錯(cuò)誤</span>

</span>

</div>

<div class="form-group has-feedback" ng-class="{ 'has-error' : form.email.$invalid && form.email.$dirty , 'has-success' : form.email.$valid && form.email.$dirty }">

<label for="email" class="col-sm-2 control-label">郵箱：</label>

<div class="col-sm-5">

<input type="email" class="form-control" name="email" id="email" ng-model="email" required="required" />

<span class="glyphicon glyphicon-ok form-control-feedback" ng-show="form.email.$dirty && form.email.$valid" aria-hidden="true"></span>

<span class="glyphicon glyphicon-remove form-control-feedback" ng-show="form.email.$dirty && form.email.$invalid" aria-hidden="true"></span>

</div>

<span class="col-sm-5" ng-show="form.email.$dirty && form.email.$invalid">

<span class="help-block" ng-show="form.email.$error.required">郵箱是必須的</span>

<span class="help-block" ng-show="form.email.$error.email">郵箱地址非法</span>

</span>

<span class="col-sm-5" ng-show="form.email.$dirty && form.email.$valid">

<span class="help-block" ng-show="form.email.$valid">OK</span>

</span>

</div>

<div class="form-group has-feedback" ng-class="{ 'has-error' : form.phone.$invalid && form.phone.$dirty , 'has-success' : form.phone.$valid && form.phone.$dirty }">

<label for="phone" class="col-sm-2 control-label">手機(jī)號：</label>

<div class="col-sm-5">

<input type="tel" class="form-control" name="phone" id="phone" ng-pattern="regex" ng-model="phone" required="required" />

<span class="glyphicon glyphicon-ok form-control-feedback" ng-show="form.phone.$dirty && form.phone.$valid" aria-hidden="true"></span>

<span class="glyphicon glyphicon-remove form-control-feedback" ng-show="form.phone.$dirty && form.phone.$invalid" aria-hidden="true"></span>

</div>

<span class="col-sm-5" ng-show="form.phone.$dirty && form.phone.$invalid">

<span class="help-block" ng-show="form.phone.$error.required">手機(jī)號不能為空</span>

<span class="help-block" ng-show="form.phone.$error.pattern">請輸入正確的11位手機(jī)號碼</span>

</span>

<span class="col-sm-5" ng-show="form.phone.$dirty && form.phone.$valid">

<span class="help-block" ng-show="form.phone.$valid">OK</span>

</span>

</div>


<div class="form-group has-feedback" ng-class="{ 'has-error' : form.password.$invalid && form.password.$dirty || userValidate=='false' , 'has-success' : form.password.$valid && form.password.$dirty && (userValidate=='' || userValidate=='true') }">

<label for="password" class="col-sm-2 control-label">密碼：</label>

<div class="col-sm-5">

<input type="password" class="form-control" name="password" id="password" ng-pattern="" ng-model="password" required="required" />

<span class="glyphicon glyphicon-ok form-control-feedback" ng-show="form.password.$dirty && form.password.$valid && (userValidate=='' || userValidate=='true')" aria-hidden="true"></span>

<span class="glyphicon glyphicon-remove form-control-feedback" ng-show="form.password.$dirty && form.password.$invalid || userValidate=='false'" aria-hidden="true"></span>

</div>

<span class="col-sm-5" ng-show="form.password.$dirty && form.password.$invalid">

<span class="help-block" ng-show="form.password.$error.required">密碼不能為空</span>

<!--<span class="help-block" ng-show="form.password.$error.pattern">請輸入正確的密碼</span>-->

</span>

<span class="col-sm-5" ng-show="form.password.$dirty && form.password.$valid">

<span class="help-block" ng-show="form.password.$valid && userValidate!='false'">OK</span>

</span>

</div>

<div class="form-group">

<div class="col-sm-offset-2 col-sm-10">

<input type="submit" class="btn btn-primary" ng-click="validate()" value="submit" ng-disabled="form.user.$dirty && form.user.$invalid || form.email.$dirty && form.email.$invalid || form.phone.$dirty && form.phone.$invalid" />

<a href="test19_register.html" class="btn btn-warning" ng-click="register()">register</a>

</div>

</div>

<!--<span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>-->

</form>

</div>


<script type="text/javascript">

//要像這樣加載模板和控制器驗(yàn)證才能有效

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('myCtrl', function($scope,$http) {

$scope.regex = /^1[34578]\d{9}$/;

$scope.userValidate = '';


//驗(yàn)證用戶名

$scope.validate = function(){

$http

.post('http://localhost/test19_validate.php',{name : $scope.user, email : $scope.email, tel : $scope.phone, password : $scope.password})

.then(function successCallback(response){

//用戶名或密碼錯(cuò)誤

if(response.data == 'error'){

$scope.userValidate = 'false';

}else{

$scope.userValidate = 'true';

window.location = './test19_success.html';

}

},function errorCallback(response){

alert('驗(yàn)證失敗');

});

}


});

</script>

</body>

</html>

test19_register.html ? ? ? ?//用戶注冊頁面

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>test19_用戶注冊頁面</title>

<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet">

<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div class="container" style="width: 600px;border: 1px solid #cccccc;box-shadow: 0 0 10px 3px #cccccc;margin-top: 150px;">

<form class="form-horizontal" name="form" ng-app="myApp" ng-controller="myCtrl" ng-submit="submitForm(form.$valid)" novalidate="novalidate">

<h2 class="col-sm-offset-2 col-sm-10">表單驗(yàn)證</h2>

<div class="form-group has-feedback" ng-class="{ 'has-error' : form.user.$invalid && form.user.$dirty || rename , 'has-success' : form.user.$valid && form.user.$dirty && !rename }">

<label for="user" class="col-sm-2 control-label">用戶名：</label>

<div class="col-sm-5">

<input type="text" class="form-control" name="user" id="user" ng-model="user" ng-minlength="3" ng-maxlength="8" required="required" />

<span class="glyphicon glyphicon-ok form-control-feedback" ng-show="form.user.$dirty && form.user.$valid && !rename" aria-hidden="true"></span>

<span class="glyphicon glyphicon-remove form-control-feedback" ng-show="form.user.$dirty && form.user.$invalid || rename" aria-hidden="true"></span>

</div>

<span class="col-sm-5" ng-show="form.user.$dirty && form.user.$invalid || rename">

<span class="help-block" ng-show="form.user.$error.required">用戶名是必須的</span>

<span class="help-block" ng-show="form.user.$error.minlength">your name is too short!</span>

<span class="help-block" ng-show="form.user.$error.maxlength">your name is too long!</span>

<span class="help-block" ng-show="rename">用戶名已存在</span>

</span>

<span class="col-sm-5" ng-show="form.user.$dirty && form.user.$valid">

<span class="help-block" ng-show="form.user.$valid && !rename">OK</span>

</span>

</div>

<div class="form-group has-feedback" ng-class="{ 'has-error' : form.email.$invalid && form.email.$dirty , 'has-success' : form.email.$valid && form.email.$dirty }">

<label for="email" class="col-sm-2 control-label">郵箱：</label>

<div class="col-sm-5">

<input type="email" class="form-control" name="email" id="email" ng-model="email" required="required" />

<span class="glyphicon glyphicon-ok form-control-feedback" ng-show="form.email.$dirty && form.email.$valid" aria-hidden="true"></span>

<span class="glyphicon glyphicon-remove form-control-feedback" ng-show="form.email.$dirty && form.email.$invalid" aria-hidden="true"></span>

</div>

<span class="col-sm-5" ng-show="form.email.$dirty && form.email.$invalid">

<span class="help-block" ng-show="form.email.$error.required">郵箱是必須的</span>

<span class="help-block" ng-show="form.email.$error.email">郵箱地址非法</span>

</span>

<span class="col-sm-5" ng-show="form.email.$dirty && form.email.$valid">

<span class="help-block" ng-show="form.email.$valid">OK</span>

</span>

</div>

<div class="form-group has-feedback" ng-class="{ 'has-error' : form.phone.$invalid && form.phone.$dirty , 'has-success' : form.phone.$valid && form.phone.$dirty }">

<label for="phone" class="col-sm-2 control-label">手機(jī)號：</label>

<div class="col-sm-5">

<input type="tel" class="form-control" name="phone" id="phone" ng-pattern="regex" ng-model="phone" required="required" />

<span class="glyphicon glyphicon-ok form-control-feedback" ng-show="form.phone.$dirty && form.phone.$valid" aria-hidden="true"></span>

<span class="glyphicon glyphicon-remove form-control-feedback" ng-show="form.phone.$dirty && form.phone.$invalid" aria-hidden="true"></span>

</div>

<span class="col-sm-5" ng-show="form.phone.$dirty && form.phone.$invalid">

<span class="help-block" ng-show="form.phone.$error.required">手機(jī)號不能為空</span>

<span class="help-block" ng-show="form.phone.$error.pattern">請輸入正確的11位手機(jī)號碼</span>

</span>

<span class="col-sm-5" ng-show="form.phone.$dirty && form.phone.$valid">

<span class="help-block" ng-show="form.phone.$valid">OK</span>

</span>

</div>

<div class="form-group has-feedback" ng-class="{ 'has-error' : form.password.$invalid && form.password.$dirty , 'has-success' : form.password.$valid && form.password.$dirty }">

<label for="password" class="col-sm-2 control-label">密碼：</label>

<div class="col-sm-5">

<input type="password" class="form-control" name="password" id="password" ng-pattern="" ng-model="password" required="required" />

<span class="glyphicon glyphicon-ok form-control-feedback" ng-show="form.password.$dirty && form.password.$valid" aria-hidden="true"></span>

<span class="glyphicon glyphicon-remove form-control-feedback" ng-show="form.password.$dirty && form.password.$invalid" aria-hidden="true"></span>

</div>

<span class="col-sm-5" ng-show="form.password.$dirty && form.password.$invalid">

<span class="help-block" ng-show="form.password.$error.required">密碼不能為空</span>

<!--<span class="help-block" ng-show="form.password.$error.pattern">請輸入正確的密碼</span>-->

</span>

<span class="col-sm-5" ng-show="form.password.$dirty && form.password.$valid">

<span class="help-block" ng-show="form.password.$valid">OK</span>

</span>

</div>


<div class="form-group has-feedback" ng-class="{ 'has-error' : form.confirmPassword.$invalid && form.confirmPassword.$dirty || (password!=confirmPassword && form.confirmPassword.$dirty) , 'has-success' : form.confirmPassword.$valid && form.confirmPassword.$dirty && password==confirmPassword }">

<label for="confirmPassword" class="col-sm-2 control-label">確認(rèn)密碼：</label>

<div class="col-sm-5">

<input type="password" class="form-control" name="confirmPassword" id="confirmPassword" ng-pattern="" ng-model="confirmPassword" required="required" />

<span class="glyphicon glyphicon-ok form-control-feedback" ng-show="form.confirmPassword.$dirty && form.confirmPassword.$valid && password==confirmPassword" aria-hidden="true"></span>

<span class="glyphicon glyphicon-remove form-control-feedback" ng-show="form.confirmPassword.$dirty && form.confirmPassword.$invalid || (password!=confirmPassword && form.confirmPassword.$dirty)" aria-hidden="true"></span>

</div>

<span class="col-sm-5" ng-show="form.confirmPassword.$dirty && form.confirmPassword.$invalid">

<span class="help-block" ng-show="form.confirmPassword.$error.required">密碼不能為空</span>

</span>

<span class="col-sm-5" ng-show="form.confirmPassword.$dirty && form.confirmPassword.$valid">

<span class="help-block" ng-show="form.confirmPassword.$valid && password==confirmPassword">OK</span>

<span class="help-block" ng-show="password!=confirmPassword && form.confirmPassword.$dirty">兩次密碼不一致</span>

</span>

</div>

<div class="form-group">

<div class="col-sm-offset-2 col-sm-10">

<input type="submit" class="btn btn-primary" value="submit" ng-disabled="form.user.$dirty && form.user.$invalid || form.email.$dirty && form.email.$invalid || form.phone.$dirty && form.phone.$invalid || form.password.$dirty && form.password.$invalid || form.confirmPassword.$dirty && form.confirmPassword.$invalid || confirmPassword!=password" />

</div>

</div>

<!--<span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>-->

</form>

</div>


<script type="text/javascript">

//要像這樣加載模板和控制器驗(yàn)證才能有效

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('myCtrl', function($scope , $http) {

$scope.regex = /^1[34578]\d{9}$/;

$scope.rename = false;


//表單提交

$scope.submitForm = function(isValid) {

if(isValid) {

$http

.post('http://localhost/test19_register.php?m=add',{name : $scope.user, email : $scope.email, tel : $scope.phone, password : $scope.password})

.then(function successCallback(response){

if(response.data == '此用戶名已被注冊'){

//用戶名已存在

$scope.rename = true;

}else{

//注冊成功

alert(response.data);

window.location = './test19.html';

}

},function errorCallback(response){

alert(response.data);

});

}

}


});

</script>

</body>

</html>


test19_validate.php

<?php

? ? /*一定要加上這兩個(gè)header*/

? ? header("Access-Control-Allow-Origin: *");

? ? header("Content-Type: application/json; charset=UTF-8");

? ? header("Content-Type:text/html;charset=utf-8");

? ? $connect = mysqli_connect('localhost','root','root','angular') or die('Unale to connect');

? ? //用戶登錄驗(yàn)證

? ? $post = [];

? ? $formData = [];

? ? $data = file_get_contents("php://input");

? ? $data = explode('&',$data);

? ? foreach ($data as $k => $v){

? ? ? ? $post[] = explode('=',$v);

? ? }

? ? foreach ($post as $k => $v){

? ? ? ? $formData += [$v[0] => urldecode($v[1])];

? ? }

? ? $name = $formData['name'];

? ? $email = $formData['email'];

? ? $tel = $formData['tel'];

? ? $password = $formData['password'];

? ? $password = md5($password);

? ? $sql = "SELECT * FROM user WHERE name='$name' AND password='$password'";

? ? $result = mysqli_query($connect,$sql);

? ? $row = mysqli_fetch_assoc($result);

? ? if($row){

? ? ? ? echo 'success';

? ? }else{

? ? ? ? echo 'error';

? ? }

?>

test19_register.php

<?php

? ? /*一定要加上這兩個(gè)header*/

? ? header("Access-Control-Allow-Origin: *");

? ? header("Content-Type: application/json; charset=UTF-8");

? ? header("Content-Type:text/html;charset=utf-8");

? ? $connect = mysqli_connect('localhost','root','root','angular') or die('Unale to connect');

? ? //用戶注冊

? ? if($_GET['m'] == 'add'){

? ? ? ? $post = [];

? ? ? ? $formData = [];

? ? ? ? $data = file_get_contents("php://input");

? ? ? ? $data = explode('&',$data);

? ? ? ? foreach ($data as $k => $v){

? ? ? ? ? ? $post[] = explode('=',$v);

? ? ? ? }

? ? ? ? foreach ($post as $k => $v){

? ? ? ? ? ? $formData += [$v[0] => urldecode($v[1])];

? ? ? ? }

? ? ? ? $name = $formData['name'];

? ? ? ? //不能有相同的用戶名

? ? ? ? $sql = "SELECT * FROM user WHERE name='$name'";

? ? ? ? $result = mysqli_query($connect,$sql);

? ? ? ? //$row為找到的滿足條件的一條條記錄

? ? ? ? $row = mysqli_fetch_assoc($result);

? ? ? ? if($row){

? ? ? ? ? ? //若有相同的用戶名已注冊

? ? ? ? ? ? echo '此用戶名已被注冊';

? ? ? ? ? ? die;

? ? ? ? }

? ? ? ? $email = $formData['email'];

? ? ? ? $tel = $formData['tel'];

? ? ? ? $password = $formData['password'];

? ? ? ? $password = md5($password);

? ? ? ? $sql = "INSERT INTO user(name,email,tel,password) VALUES ('$name', '$email', '$tel', '$password')";

? ? ? ? $result = mysqli_query($connect,$sql);

? ? ? ? if($result){

? ? ? ? ? ? echo '用戶注冊成功栏妖，請重新登錄';

? ? ? ? }else{

? ? ? ? ? ? echo '注冊失敗';

? ? ? ? }

? ? }

?>

（寫這兩個(gè)php文件的時(shí)候偷了下懶，只是粗略的實(shí)現(xiàn)了自己想要的功能）

其中驗(yàn)證部分奖恰，因?yàn)槭褂玫氖荁ootStrap吊趾，配合Angular實(shí)現(xiàn)的效果個(gè)人還是蠻喜歡的，驗(yàn)證除了要寫的正則表達(dá)式外（好像還沒有加上...）瑟啃，在控制器中基本上是沒有代碼的论泛；這里補(bǔ)充幾個(gè)Angular中表單的狀態(tài)：

$dirty ? ?表單有填寫記錄

$valid ? ?字段內(nèi)容合法的

$invalid ? ?字段內(nèi)容是非法的

$pristine ? ?表單沒有填寫記錄

$error ? ?包含該驗(yàn)證字段的錯(cuò)誤信息，像 required蛹屿，minlength屁奏，maxlength等等；

其實(shí)寫這個(gè)用戶登錄注冊错负，主要是想熟悉了解Angular中對數(shù)據(jù)庫的操作坟瓢，$http;

（以下是個(gè)人對Angular操作數(shù)據(jù)庫的理解，肯定是還有很多問題的犹撒，望大牛們多多指點(diǎn)0.0）

var app = angular.module('myApp', []); ? ?//定義應(yīng)用類

app.controller('myCtrl', function($scope,$http) {}); ? ?//定義控制器

（若要使用$http這個(gè)服務(wù)折联，記得一定要事先引用它哦）

要解釋$http服務(wù)前，我想先談?wù)勎覍?scope的理解：

$scope是一個(gè)把view（一個(gè)DOM元素）連結(jié)到controller上的對象油航， $scope 實(shí)際上就是一個(gè)JavaScript對象崭庸； 每一個(gè)Angular應(yīng)用都會有一個(gè) $rootScope怀浆。這個(gè) $rootScope 是最頂級的scope谊囚，它對應(yīng)著含有 ng-app 指令屬性的那個(gè)DOM元素。 要明確創(chuàng)建一個(gè)$scope 對象执赡，我們就要給DOM元素安上一個(gè)controller對象镰踏，使用的是ng-controller 指令屬性； ng-model指令屬性 被用來將DOM文本輸入框的值沙合，跟controller里的$scope model綁定起來奠伪。具體的實(shí)現(xiàn)過程，是在這個(gè)值上綁定了一個(gè)$watch函數(shù)（類似JavaScript里的事件監(jiān)聽函數(shù)）首懈。

接下來是$http

操作數(shù)據(jù)庫之前绊率，通常需要在前端和數(shù)據(jù)庫之間編寫一層“Web服務(wù)”。 AngularJS應(yīng)用程序會向你的Web服務(wù)發(fā)出請求究履。 你的Web服務(wù)將與MySQL進(jìn)行通信滤否，以檢查用戶權(quán)限，讀取數(shù)據(jù)或?qū)懭霐?shù)據(jù)最仑。這些后端Web服務(wù)可以用任何語言和框架來編寫藐俺。

首先炊甲，$http中有兩個(gè)常用的請求get和post方法；分別有兩個(gè)寫法：

1.$http.get('test.php',{});

2.$http({

? ? ?method : 'get',

? ? ?url : 'test.php',

? ? ?params : {

? ? ? ? ? 'username' : 'lzc'

? ? ?}

});

由于增刪改都需要由html頁面?zhèn)鬟f數(shù)據(jù)到后臺php文件中欲芹，但是像$http.post('test.php' , {id : 1});這樣傳遞卿啡，在php文件中用$_POST是獲取不到傳遞過來的數(shù)據(jù)的。So...

angular中$http模塊POST請求request pay load轉(zhuǎn)form data的兩種方法：

? ? ? ? ? ? ? ?var app = angular.module('app',[]);

? ? ? ? ? ? ? ? //angular中$http模塊POST請求request pay load轉(zhuǎn)form data的兩種方法

? ? ? ? ? ? ? ? //打開瀏覽器的調(diào)試工具菱父，會在Network中看到這些信息

? ? ? ? ? ? ? ? //方法一

? ? ? ? ? ? ? ? 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('ctrl',function($scope,$http){

? ? ? ? ? ? ? ? ? ? ?$http({

? ? ? ? ? ? ? ? ? ? ? ? ? ?method : 'post',

? ? ? ? ? ? ? ? ? ? ? ? ? ?url : 'http://localhost/test20.php',

? ? ? ? ? ? ? ? ? ? ? ? ? ?data : {name : 'lzc' , age : 20},

? ? ? ? ? ? ? ? ? ? ? ? ? ?headers : {'Content-Type':'application/x-www-form-urlencoded'},

? ? ? ? ? ? ? ? ? ? ? ? ? ?transformRequest:function(obj){

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var str = [];

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? for(var p in obj){

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?str.push(encodeURIComponent(p)+"="+encodeURIComponent(obj[p]));

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return str.join("&");

? ? ? ? ? ? ? ? ? ? ? ? ? ?}

? ? ? ? ? ? ? ? ? ? ?}).then(function successCallback(response){

? ? ? ? ? ? ? ? ? ? ? ? ? ?alert('s');

? ? ? ? ? ? ? ? ? ? ?},function errorCallback(response){

? ? ? ? ? ? ? ? ? ? ? ? ? ?alert('er');

? ? ? ? ? ? ? ? ? ? ?});

? ? ? ? ? ? ? ? });

php文件：

<?php

? ? /*一定要加上這兩個(gè)header*/

? ? header("Access-Control-Allow-Origin: *");

// ? ?header("Content-Type: application/json; charset=UTF-8");

? ? header("Content-Type:text/html;charset=utf-8");


? ? $post = [];

? ? $formData = [];

? ? $data = file_get_contents("php://input");

? ? $data = explode('&',$data);

? ? foreach ($data as $k => $v){

? ? ? ? $post[] = explode('=',$v);

? ? }

? ? foreach ($post as $k => $v){

? ? ? ? $formData += [$v[0] => urldecode($v[1])];

? ? }


? ? $name = $formData['name'];

? ? $quantity = $formData['quantity'];

? ? $price = $formData['price'];


? ? $connect = mysqli_connect('localhost','root','root','angular') or die('Unale to connect');

? ? $sql = "insert into shop (name,quantity,price) values('$name','$quantity','$price')";

? ? $result = mysqli_query($connect,$sql);

? ? if($result){

? ? ? ? echo 'success';

? ? }else{

? ? ? ? echo 'error';

? ? }

?>

至此總得就寫完啦颈娜，第一次肯定會有很多問題，歡迎大家指出不足的問題浙宜。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末揭鳞，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子梆奈，更是在濱河造成了極大的恐慌野崇，老刑警劉巖，帶你破解...
    沈念sama閱讀 216,496評論 6贊 501
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件亩钟，死亡現(xiàn)場離奇詭異乓梨，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)清酥，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評論 3贊 392
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門扶镀，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人焰轻，你說我怎么就攤上這事臭觉。” “怎么了辱志？”我有些...
    開封第一講書人閱讀 162,632評論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵蝠筑，是天一觀的道長。 經(jīng)常有香客問我揩懒，道長什乙，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 58,180評論 1贊 292
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任已球，我火速辦了婚禮臣镣，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘智亮。我一直安慰自己忆某，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,198評論 6贊 388
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布阔蛉。 她就那樣靜靜地躺著弃舒，像睡著了一般。 火紅的嫁衣襯著肌膚如雪馍忽。 梳的紋絲不亂的頭發(fā)上棒坏，一...
    開封第一講書人閱讀 51,165評論 1贊 299
  • 城市分裂傳說
    那天燕差，我揣著相機(jī)與錄音，去河邊找鬼坝冕。 笑死徒探，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的喂窟。 我是一名探鬼主播测暗，決...
    沈念sama閱讀 40,052評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼磨澡！你這毒婦竟也來了碗啄？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 38,910評論 0贊 274
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤稳摄，失蹤者是張志新（化名）和其女友劉穎稚字，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體厦酬，經(jīng)...
    沈念sama閱讀 45,324評論 1贊 310
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡胆描，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,542評論 2贊 332
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了仗阅。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片昌讲。...
    茶點(diǎn)故事閱讀 39,711評論 1贊 348
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖减噪，靈堂內(nèi)的尸體忽然破棺而出短绸，到底是詐尸還是另有隱情，我是刑警寧澤筹裕，帶...
    沈念sama閱讀 35,424評論 5贊 343
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布醋闭，位于F島的核電站，受9級特大地震影響饶碘，放射性物質(zhì)發(fā)生泄漏目尖。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,017評論 3贊 326
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一扎运、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧饮戳，春花似錦豪治、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評論 0贊 22
  • 一樁弒父案负拟，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至歹河，卻和暖如春掩浙，著一層夾襖步出監(jiān)牢的瞬間花吟，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國打工厨姚， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留衅澈，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,722評論 2贊 368
  • 代替公主和親
    正文 我出身青樓谬墙，卻偏偏與公主長得像今布，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子拭抬，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,611評論 2贊 353

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理部默，服務(wù)發(fā)現(xiàn)，斷路器造虎，智...
    卡卡羅2017閱讀 134,651評論 18贊 139
  • 通過AngularJS仿豆瓣一刻的案例：https://github.com/zhongxiaolian/doub...
    中小戀閱讀 1,759評論 1贊 21
  • 自己做dede的開發(fā)時(shí)間也比較長了傅蹂，基本上常用的函數(shù)都知道在哪個(gè)文件里面，但是時(shí)間一長算凿，也有點(diǎn)模糊了贬派，俗話說：好記...
    大劉的英語世界閱讀 1,692評論 1贊 9
  • AngularJS是什么？AngularJs（后面就簡稱ng了）是一個(gè)用于設(shè)計(jì)動態(tài)web應(yīng)用的結(jié)構(gòu)框架澎媒。首先搞乏，它是...
    200813閱讀 1,602評論 0贊 3
  • Angular面試題 一、ng-show/ng-hide與ng-if的區(qū)別戒努？ 第一點(diǎn)區(qū)別是请敦，ng-if在后面表達(dá)式...
    w_zhuan閱讀 5,527評論 0贊 26