加载中

A lot of developers were submitting forms before AngularJS came out. There were so many different ways to submit forms that it could drive a person crazy… and they still can.

Today we’ll be looking at a simple form that used to be submitted using PHP and how to convert that to Angular. Using Angular for forms was one of those AHA moments for me. Even though it barely scratches the surface of Angular, it helps a user see the potential after seeing forms submitted and understanding the idea of two-way data-binding.

We will look at processing a form with just plain jQuery. The work needed to do this will be primarily in the javascript. We will submit the form, show errors, add error classes, and show/hide messages in javascript.

在AngularJS出现之前,很多开发者就面对了表单提交这一问题。由于提交表单的方式繁杂而不同,很容易令人疯掉……然而现在看来,依然会让人疯掉。

今天,我们会看一下过去使用PHP方式提交的表单,现在如何将其转换为使用Angular提交。使用Angular来处理表单,对我而言,是一个“啊哈”时刻(译者:表示了解或发现某事物的喜悦)。即使它甚至都没有涉及多少Angular表层的东西,但是它却帮助用户看到表单提交之后的潜力,并且理解两种数据绑定方式。

我们会使用jQuery平台来进行这个处理过程。所以所要做的工作首先使用javascript。我们会提交表单,展示错误信息,添加错误类,并且在javascript中显示和隐藏信息。

After that, we will be using Angular. The bulk of the work that was needed before will go away and lots of the things we did before (showing errors, adding classes, showing/hiding messages) will be so much simpler. Let’s dive in.

Submitting Forms with Just jQuery and AJAX: If you want to view a full article on submitting a form just using jQuery and AJAX, view our other article: Submitting AJAX Forms with jQuery.

Our Sample Form

We’ll be looking at two ways to submit this form:

  • The Old Way: AJAX Form with jQuery and PHP

  • The New Way: AJAX Form with AngularJS and PHP

Take a look at what we’ll be building. Super simple.

submitting-forms-with-angular

Form Requirements

  • Process the form without page refresh

  • Enter Name and Superhero Alias

  • Show errors if there are any

  • Turn inputs red if there are errors

  • Show success message if all is good

File Structure

We’ll only need two files to demonstrate.

  • index.html

  • process.php

之后,我们会使用Angular。在使用之前,我们要做大部分所需的工作,并且我们之前所做的很多工作会非常容易。让我们开始吧。

仅使用jQuery和AJAX提交表单:如果你想看一篇完整的关于仅使用jQuery和AJAX提交表单的文章,请参见我们的另一篇文章:使用jQuery提交表单的方式

简单的表单

我们会关注两种提交表单的方式:

  • 旧方法:jQuery和PHP提交表单

  • 新方法:AngularJS和PHP提交表单

首先看一下我们的表单,超级简单:

submitting-forms-with-angular

形式要求

  • 实现页面无刷新表单处理

  • 输入姓名和超级英雄别名

  • 如果有错误,显示错误提示

  • 如果输入有误,将输入变成红色

  • 如果所有内容ok,显示成功提示

文档结构

在我们的展示中,仅需两个文件

  • index.html

  • process.php

Processing the Form

Let’s setup the PHP to process our form. This will be very minimal and will use http POST to get the form data.

Processing the Form: This won’t be that important to us. You can use any other language to process your form that you like.

// 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);

This is a very simple form processing script. We will just check if the data exists. If it does exist, don’t do anything. If it doesn’t exist, add a message to our $errors array.

To return our data to an AJAX call, we have to echo and json_encode. This is all we have to do with our PHP form processing. It will be the same for processing a form using normal jQuery AJAX or 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处理表单也是这样的。

Showing the Form

Let’s create our HTML that will show our form.

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

Now we have our form. We’ve also used Bootstrap to make it not super ugly. Using the Bootstrap syntax, there is also a spot under each input to show a line of text for our errors.

submitting-forms-with-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来展示我们文本的错误信息。

submitting-forms-with-angular

Submit the Form with jQuery

Let’s go through the process of submitting the form with jQuery now. We will add all the code into our empty <script> tags.

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

...

There’s a lot of code here to process the form. We have code to get the variables from the form, send it to our form using AJAX, check if there are any errors, and show a success message. On top of all that, every time the form is submitted, we want it to clear the past errors. Quite a lot of code.

Now if there is an error:

submitting-error

Or if there is a successful submission:

submit-success

Now let’s look at the same form, submitted with Angular. Remember, we don’t have to change anything about how our PHP processes the form and our application will function the same (showing errors and successes in the same places).

使用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将数据发送至我们的表单的代码,有检查是否有错和显示成功提示的代码。除此之外,我们希望每次表单提交之后,过去的错误信息都会被清除。确实是不少代码。

现在,如果表单中含有错误,则:

submitting-error

如果提交成功:

submit-success

现在,让我们看使用Angular来提交相同的表单。记住,我们不需要更改任何关于我们的PHP如何处理表单的内容,我们的应用依然会具备相同的功能(在同一个地方展示错误和成功信息)。

Submit the Form with Angular

We are going to set up our Angular application right inside the <script> tags we used earlier. So just delete everything inside and let’s begin.

Setting Up An Angular Application

The steps to set up our Angular application are:

  1. Load angular

  2. Set up a module

  3. Set up controller

  4. Apply module and controller to HTML

  5. Set up 2-way bound variables

  6. Set up errors and messages

It sounds like a lot, but in the end, we’ll use far less code and it will be much cleaner. It will also be much easier to create larger forms with many more inputs.

Angular Module and Controller

Let’s load up Angular and create our module and controller.

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

...

We now have the foundation for our Angular app. We’ve loaded Angular, created a module and controller, and applied it to our site.

Next we will be showing off how 2-way binding works.

使用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,创建了组件模块和控制器,并且将其应用于我们的网站。

接下来,我将展示双向绑定是如何工作的。

2-Way Data-Binding

This is one of the core ideas of Angular and one of its most powerful. From the Angular docs: “Data-binding in Angular web apps is the automatic synchronization of data between the model and view.” This means that the step where we have to grab data from the form using $('input[name=name]').val() is not required.

We bind data to a variable in Angular, and whenever it changes in either the Javascript or in the view, it changes in both.

To demonstrate data-binding, we’ll get our form inputs to populate a variable formData automagically. Let’s look back at our Angular controller that we applied to our page. We passed in $scope and $http.

$scope: The glue between application controller and the view. Basically variables are passed to and from our controller and view using $scope. For a more detailed definition, check out the docs.
$http: The Angular service that will help us do our POST request. For more information, check out the docs.

双向数据绑定

这是Angular的核心思想之一,也是功能最强大的内容之一。在Angular文档中,我们看到:“在Angular网页应用中的数据绑定,是模型和视图层之间的数据自动同步。”这意味着,我们需要在表单中抓取数据,使用$('input[name=name]').val()并不是必需的。

我们在Angular中将数据和变量绑定在一起,无论是javascript也好,view也罢,只要有改变,两者皆变。

为了演示数据绑定,我们需要获取表单的input来自动填充变量formData。让我们回到应用于页面的Angular控制器中。我们在过一下$scope和$http。

$scope:控制器和视图层之间的粘合剂。基本上,变量使用$scope从我们的控制器和视图层之间传递和往来。具体详细的定义,请参见文档

$http:Angular服务来帮助我们处理POST请求。更多信息,请参见文档

Getting the Variables Using Data-Binding

Alright, enough talk. Let’s apply this information to our form. It’s way simpler than it sounded above. We will add a line to the Angular controller and a line to the view.

<!-- 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 = {};

        }

...

Now we have set up a formData object. Let’s populate it with our form inputs. Before we had to explicitly call each input and get its val(). Not anymore. We will use ng-model to bind a specific input to a variable.

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

...

Now, Angular will now that each input is bound to formData. As you type into each input box, you can see the formData object being populated! It’s magic!

You do not need to use the word $scope in the view. Everything is considered to be nested inside of $scope.

使用数据绑定获取变量

好了,闲话少说。我们将这些讨论应用到表单中去。方法比上面讨论的要简单。我们想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中的。

Processing the Form

In our old form, we had to use jQuery to submit the form using $('form').submit(). Now we will use an Angular feature called ng-submit. To do this, we will add a controller function to process the form, and tell our form to use that controller function..

<!-- 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()">

...

Now our form knows to use that controller function when it is submitted. Now that we have that in place, let’s actually process the form using $http.

The syntax for processing a form will look very similar to the original way of doing it. The benefit is that we don’t have to grab our form data manually, or inject, hide, or add classes to show errors or success messages.

<!-- 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;
            }
        });
};

...

That’s it for our form! None of that adding or removing classes. We don’t have to clear the errors every time we submit the form. We just have to bind the variables and the view will take care of the rest. This is great since the controller is for the data and the view is for showing the data.

处理表单

在我们的旧表单中,我们使用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 Sometimes you may see that your POST isn’t showing data on the server. This is because of the difference in the way jQuery and Angular serialize and send data. This comes down to the server language you are using and its ability to understand Angular’s data.

The above code is for a PHP server and jQuery is needed for the $.param function. There are ways to do it without jQuery but that’s pretty much the only reason jQuery was included for this example. Because it was easier.

The below cleaner syntax will work based on your server-side language. For more information on making AngularJS AJAX calls, read this great article: Make AngularJS $http Service Behave Like jQuery AJAX

jQuery POST vs Angular POST

有时能看到用POST方式提交在服务器中看不到数据,这是因为jQuery和Angular的序列化和发送数据的方式不同。这归结于你所使用的服务器语言和它理解Angular提交的数据的能力。

上面的代码是应用于PHP服务器的,jQuery对于$.param函数则是必需的。虽然实现上文中提到的内容有非常多不使用jQuery的方法,但在本实例中,使用jQuery的唯一原因就是,它更简单。

下面简洁的语法将会基于你服务器端语言来工作。更多关于AngularJS AJAX调用的信息,欢迎阅读这篇非常棒的文章:Make AngularJS $http Service Behave Like jQuery AJAX

返回顶部
顶部