使用Angular提交表單

時間 2019-11-18

標籤使用 angular 提交表單欄目 AngularJS 简体版

原文原文鏈接

使用Angular提交表單

咱們準備在以前使用的<script>標籤中設置咱們的Angular應用。因此刪除裏面的內容，咱們就能夠開始了。javascript

設置一個Angular應用

步驟爲：php

1. 加載Angularhtml

2. 設置modulejava

3. 這是controllerjquery

4. 將module和controller應用於HTMLangularjs

5. 設置雙向變量綁定ajax

6. 這是錯誤和信息api

看起來好像是不少內容，可是最終，咱們會用很是少的代碼，而且看起來會很是簡潔。另外，建立帶有更多輸入更大的表單，也會更容易。服務器

Angular 組件和控制器app

首先，加載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的惟一緣由就是，它更簡單。

下面簡潔的語法將會基於你服務器端語言來工做。更多關於AngularJS AJAX調用的信息，歡迎閱讀這篇很是棒的文章：Make AngularJS $http Service Behave Like jQuery AJAX

簡潔語法

這個例子是以字符串的方式發送數據，而且發送你的頭信息。若是你不須要這些，而且但願Angular 的$http POST儘量的簡潔，咱們可使用簡寫方法：

...

    $http.post('process.php', $scope.formData)

        .success(function(data) {

            ...

        });

...

絕對更簡潔更容易記住方法。

$http 內部控制器：理想的，你能夠將$http請求從controller移除到 service.這只是爲了演示目的，咱們將會盡快在service上進行討論.

在視圖中顯示錯誤和信息

咱們將使用指令ng-show和ng-class來處理咱們的視圖，Angular雙方括號容許咱們將變量放置在咱們須要的地方。

ng-show: 根據變量值是否存在來顯示或隱藏元素. 文檔
ng-class: 根據變量值是否存在（或一些其餘表達式）來添加或移除類. 文檔

<!-- 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>

 

...