首頁 > 開發者 > JavaScript
詳細分析使用AngularJS編程中提交表單的方式，angularjs表單
在AngularJS出現之前，很多開發人員就面對了表單提交這一問題。由於提交表單的方式繁雜而不同，很容易令人瘋掉……然而現在看來，依然會讓人瘋掉。
今天，我們會看一下過去使用PHP方式提交的表單，現在如何將其轉換為使用Angular提交。使用Angular來處理表單，對我而言，是一個“啊哈”時刻（譯者：表示瞭解或發現某事物的喜悅）。即使它甚至都沒有涉及多少Angular表層的東西，但是它卻協助使用者看到表單提交之後的潛力，並且理解兩種資料繫結方式。
我們會使用jQuery平台來進行這個處理過程。所以所要做的工作首先使用javascript。我們會提交表單，展示錯誤資訊，添加錯誤類，並且在javascript中顯示和隱藏資訊。
之後，我們會使用Angular。在使用之前，我們要做大部分所需的工作，並且我們之前所做的很多工作會非常容易。讓我們開始吧。
簡單的表單
我們會關注兩種提交表單的方式：
首先看一下我們的表單，超級簡單：
形式要求
文檔結構
在我們的展示中，僅需兩個檔案
表單處理
讓我們建立一個PHP來處理表單。該頁面非常小並且使用POST方式提交資料。
處理表單：這對我們來說並不是那麼重要的。你可以使用其他你喜歡的語言來處理你的表單。
// process.php <?php $errors = array(); // array to hold validation errors$data = array(); // array to pass back data // validate the variables ====================================================== if (empty($_POST['name'])) $errors['name'] = 'Name is required.'; if (empty($_POST['superheroAlias'])) $errors['superheroAlias'] = 'Superhero alias is required.'; // return a response =========================================================== // response if there are errors if ( ! empty($errors)) { // if there are items in our errors array, return those errors $data['success'] = false; $data['errors'] = $errors; } else { // if there are no errors, return a message $data['success'] = true; $data['message'] = 'Success!'; } // return all our data to an AJAX call echo json_encode($data);這是一個非常簡單的表單處理指令碼。我們僅檢查資料是否存在，如果存在，則不做任何處理和操做；如果不存在，則需要向$errors數組中添加一條資訊。
為了返回我們的資料用於AJAX調用，我們需要使用echo和json_encode。這就是我們PHP表單處理所有需要做的操作。使用普通的jQuery AJAX或者Angular處理表單也是這樣的。
展示表單
讓我們建立一個HTML來展示我們的表單
<!-- index.html --> <!doctype html><html><head> <title>Angular Forms</title> <!-- LOAD BOOTSTRAP CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"> <!-- LOAD JQUERY --> <!-- when building an angular app, you generally DO NOT want to use jquery --> <!-- we are breaking this rule here because jQuery's $.param will help us send data to our PHP script so that PHP can recognize it --> <!-- this is jQuery's only use. avoid it in Angular apps and if anyone has tips on how to send data to a PHP script w/o jQuery, please state it in the comments --> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <!-- PROCESS FORM WITH AJAX (OLD) --> <script> <!-- WE WILL PROCESS OUR FORM HERE --> </script></head><body><div class="container"><div class="col-md-6 col-md-offset-3"> <!-- PAGE TITLE --> <div class="page-header"> <h1><span class="glyphicon glyphicon-tower"></span> Submitting Forms with Angular</h1> </div> <!-- SHOW ERROR/SUCCESS MESSAGES --> <div id="messages"></div> <!-- FORM --> <form> <!-- NAME --> <div id="name-group" class="form-group"> <label>Name</label> <input type="text" name="name" class="form-control" placeholder="Bruce Wayne"> <span class="help-block"></span> </div> <!-- SUPERHERO NAME --> <div id="superhero-group" class="form-group"> <label>Superhero Alias</label> <input type="text" name="superheroAlias" class="form-control" placeholder="Caped Crusader"> <span class="help-block"></span> </div> <!-- SUBMIT BUTTON --> <button type="submit" class="btn btn-success btn-lg btn-block"> <span class="glyphicon glyphicon-flash"></span> Submit! </button> </form> </div></div></body></html>
現在，我們有了表單。我們另外還使用了Bootstrap來使表單看起來不是那麼醜。使用Bootstrap文法規則，每個input下含有一個spot來展示我們文本的錯誤資訊。
使用jQuery提交表單
現在，讓我們來使用jQuery處理表單提交。我會將所有的代碼添加到空的<script>標籤中
<!-- index.html --> ... <!-- PROCESS FORM WITH AJAX (OLD) --> <script> $(document).ready(function() { // process the form $('form').submit(function(event) { // remove the past errors $('#name-group').removeClass('has-error'); $('#name-group .help-block').empty(); $('#superhero-group').removeClass('has-error'); $('#superhero-group .help-block').empty(); // remove success messages $('#messages').removeClass('alert alert-success').empty(); // get the form data var formData = { 'name' : $('input[name=name]').val(), 'superheroAlias' : $('input[name=superheroAlias]').val() }; // process the form $.ajax({ type : 'POST', url : 'process.php', data : formData, dataType : 'json', success : function(data) { // log data to the console so we can see console.log(data); // if validation fails // add the error class to show a red input // add the error message to the help block under the input if ( ! data.success) { if (data.errors.name) { $('#name-group').addClass('has-error'); $('#name-group .help-block').html(data.errors.name); } if (data.errors.superheroAlias) { $('#superhero-group').addClass('has-error'); $('#superhero-group .help-block').html(data.errors.superheroAlias); } } else { // if validation is good add success message $('#messages').addClass('alert alert-success').append('<p>' + data.message + '</p>'); } } }); // stop the form from submitting and refreshing event.preventDefault(); }); }); </script> ...
這裡處理表單有不少的代碼。我們有擷取表單中變數的代碼，有使用AJAX將資料發送至我們的表單的代碼，有檢查是否有錯和顯示成功提示的代碼。除此之外，我們希望每次表單提交之後，過去的錯誤資訊都會被清除。確實是不少代碼。
現在，如果表單中含有錯誤，則：
如果提交成功：
現在，讓我們看使用Angular來提交相同的表單。記住，我們不需要更改任何關於我們的PHP如何處理表單的內容，我們的應用依然會具備相同的功能（在同一個地方展示錯誤和成功資訊）。
使用Angular提交表單
我們準備在之前使用的<script>標籤中設定我們的Angular應用。所以刪除裡面的內容，我們就可以開始了。
設定一個Angular應用
步驟為：
1. 載入Angular
2. 設定module
3. 這是controller
4. 將module和controller應用於HTML
5. 設定雙向變數綁定
6. 這是錯誤和資訊
看起來好像是很多內容，但是最終，我們會用非常少的代碼，並且看起來會非常簡潔。另外，建立帶有更多輸入更大的表單，也會更容易。
Angular 組件和控制器
首先，載入Angular並且新群組件和控制器
<!-- index.html --> ... <!-- LOAD JQUERY --> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <!-- LOAD ANGULAR --> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script> <!-- PROCESS FORM WITH AJAX (NEW) --> <script> // define angular module/app var formApp = angular.module('formApp', []); // create angular controller and pass in $scope and $http function formController($scope, $http) { } </script></head> <!-- apply the module and controller to our body so angular is applied to that --><body ng-app="formApp" ng-controller="formController"> ...
現在，我們有了Angular應用的基礎。我們已經載入了Angular，建立了組件模組和控制器，並且將其應用於我們的網站。
接下來，我將展示雙向繫結是如何工作的。
雙向資料繫結
這是Angular的核心思想之一，也是功能最強大的內容之一。在Angular文檔中，我們看到：“在Angular網頁應用中的資料繫結，是模型和視圖層之間的資料自動同步。”這意味著，我們需要在表單中抓取資料，使用$('input[name=name]').val()並不是必需的。
我們在Angular中將資料和變數綁定在一起，無論是javascript也好，view也罷，只要有改變，兩者皆變。
為了示範資料繫結，我們需要擷取表單的input來自動填滿變數formData。讓我們回到應用於頁面的Angular控制器中。我們在過一下$scope和$http。
$scope：控制器和視圖層之間的粘合劑。基本上，變數使用$scope從我們的控制器和視圖層之間傳遞和往來。具體詳細的定義，請參見文檔。
$http：Angular服務來協助我們處理POST請求。更多資訊，請參見文檔。
使用資料繫結擷取變數
好了，閑話少說。我們將這些討論應用到表單中去。方法比上面討論的要簡單。我們想Angular控制器和視圖中分別添加一行。
<!-- index.html --> ... <!-- PROCESS FORM WITH AJAX (NEW) --> <script> // define angular module/app var formApp = angular.module('formApp', []); // create angular controller and pass in $scope and $http function formController($scope, $http) { // create a blank object to hold our form information // $scope will allow this to pass between controller and view $scope.formData = {}; } ...
現在，我們已經建立了一個formData對象。讓我們用表單資料來填充它。在顯示調用每個輸入和獲得val()之前，我們用ng-model綁定一個特殊的輸入到變數。
<!-- index.html --> ... <!-- FORM --> <form> <!-- NAME --> <div id="name-group" class="form-group"> <label>Name</label> <input type="text" name="name" class="form-control" placeholder="Bruce Wayne" ng-model="formData.name"> <span class="help-block"></span> </div> <!-- SUPERHERO NAME --> <div id="superhero-group" class="form-group"> <label>Superhero Alias</label> <input type="text" name="superheroAlias" class="form-control" placeholder="Caped Crusader" ng-model="formData.superheroAlias"> <span class="help-block"></span> </div> <!-- SUBMIT BUTTON --> <button type="submit" class="btn btn-success btn-lg btn-block"> <span class="glyphicon glyphicon-flash"></span> Submit! </button> </form> <!-- SHOW DATA FROM INPUTS AS THEY ARE BEING TYPED --> <pre> {{ formData }} </pre> ...
現在，既然Angular已經將每個輸入綁到了formData。 當你輸入每個輸入框，你可以看到formData對象被填充了！有沒有很酷！
你不必在view中使用$scope。一切被認為是嵌入到$scope中的。
處理表單
在我們的舊錶單中，我們使用jQuery提交表單，像這樣$('form').submit()。現在我們使用Angular稱作ng-submit的特性。要想完成這個，我們需要添加一個控制器函數來處理表單，然後告訴我們form使用這個控制器函數：
<!-- index.html --> ... <!-- PROCESS FORM WITH AJAX (NEW) --> <script> // define angular module/app var formApp = angular.module('formApp', []); // create angular controller and pass in $scope and $http function formController($scope, $http) { // create a blank object to hold our form information // $scope will allow this to pass between controller and view $scope.formData = {}; // process the form $scope.processForm = function() { }; } ... <!-- FORM --> <form ng-submit="processForm()"> ...
現在我們的form知道提交時使用控制器函數了。既然已經到位了，然我們用$http來處理表單吧。
處理表單的文法看起來跟原始方式很像。好處是我們不需要手動抓取表單資料，或者注入，隱藏，添加類顯示錯誤或成功資訊。
<!-- index.html --> ... // process the form$scope.processForm = function() { $http({ method : 'POST', url : 'process.php', data : $.param($scope.formData), // pass in data as strings headers : { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers so angular passing info as form data (not request payload) }) .success(function(data) { console.log(data); if (!data.success) { // if not successful, bind errors to error variables $scope.errorName = data.errors.name; $scope.errorSuperhero = data.errors.superheroAlias; } else { // if successful, bind success message to message $scope.message = data.message; } });}; ...
這就是我們的表單！沒有添加或移除類。我們需要每次提交表單時都清楚錯誤。我們只需綁定變數和需要用到的視圖。這非常棒，因為處理器用來處理資料，而視圖用來顯示資料.
jQuery POST vs Angular POST
有時能看到用POST方式提交在伺服器中看不到資料，這是因為jQuery和Angular的序列化和發送資料的方式不同。這歸結於你所使用的伺服器語言和它理解Angular提交的資料的能力。
上面的代碼是應用於PHP伺服器的，jQuery對於$.param函數則是必需的。雖然實現上文中提到的內容有非常多不使用jQuery的方法，但在本執行個體中，使用jQuery的唯一原因就是，它更簡單。
下面簡潔的文法將會基於你伺服器端語言來工作。
簡潔文法
這個例子是以字串的方式發送資料，並且發送你的頭資訊。如果你不需要這些，並且希望Angular 的$http POST儘可能的簡潔，我們可以使用簡寫方法：
... $http.post('process.php', $scope.formData) .success(function(data) { ... });...
絕對更簡潔更容易記住方法。
$http 內部控制器： 理想的，你可以將$http請求從controller移除到 service.這隻是為了示範目的，我們將會儘快在service上進行討論.
在視圖中顯示錯誤和資訊
我們將使用指令ng-show和ng-class來處理我們的視圖，Angular雙方括弧允許我們將變數放置在我們需要的地方。
<!-- index.html --> ... <!-- SHOW ERROR/SUCCESS MESSAGES --> <div id="messages" ng-show="message">{{ message }}</div> <!-- FORM --> <form> <!-- NAME --> <div id="name-group" class="form-group" ng-class="{ 'has-error' : errorName }"> <label>Name</label> <input type="text" name="name" class="form-control" placeholder="Bruce Wayne"> <span class="help-block" ng-show="errorName">{{ errorName }}</span> </div> <!-- SUPERHERO NAME --> <div id="superhero-group" class="form-group" ng-class="{ 'has-error' : errorSuperhero }"> <label>Superhero Alias</label> <input type="text" name="superheroAlias" class="form-control" placeholder="Caped Crusader"> <span class="help-block" ng-show="errorSuperhero">{{ errorSuperhero }}</span> </div> ...
我們的表單完成了！通過強大的Angular，我們可以將這些愚蠢的顯示/隱藏的js代碼邏輯從視圖中移走 了。現在我們的js檔案只用來處理資料，並且視圖可以做它自己的事情了。
我們的類和錯誤/成功等提示資訊將在可擷取時顯示而不可擷取時隱藏。當我們無須再像使用老的javascript那樣擔心是否已經考慮全面，這變得更加容易。你也無須再擔心是否記得隱藏每處form提交時的那些錯誤資訊。
Angular表單驗證 擷取更多表單驗證的資訊，請研讀我們另一文章：AngularJS Form Validation。
結束語
現在我們已把美觀的表單全部轉變為Angular的了。我們共同學習了許多概念，希望你與它們接觸更多，它們也將更易用。
回顧:
這些Angular技術將在更龐大的應用中使用，你可以用它們建立許多好東西。祝Angular之途愉快，敬請期待更多深入的文章。同時，你也可以通過深入瞭解其指南，服務和廠商等來繼續學習Angular。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
