AngularJS提交表单的方式

2014-6-30 14:59| 发布者: joejoe0332| 查看: 50085| 评论: 0|原作者: 0x0bject, GoodLoser, it瞌睡虫|来自: 开源中国社区

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

处理表单

在我们的旧表单中，我们使用jQuery提交表单，像这样$('form').submit()。现在我们使用Angular称作ng-submit的特性。要想完成这个，我们需要添加一个控制器函数来处理表单，然后告诉我们form使用这个控制器函数：

01<!-- index.html -->
02 
03...
04 
05    <!-- PROCESS FORM WITH AJAX (NEW) -->
06    <script>
07 
08        // define angular module/app
09        var formApp = angular.module('formApp', []);
10 
11        // create angular controller and pass in $scope and $http
12        function formController($scope, $http) {
13 
14            // create a blank object to hold our form information
15            // $scope will allow this to pass between controller and view
16            $scope.formData = {};
17 
18            // process the form
19            $scope.processForm = function() {
20 
21            };
22 
23        }
24 
25...
26 
27    <!-- FORM -->
28    <form ng-submit="processForm()">
29 
30...

现在我们的form知道提交时使用控制器函数了。既然已经到位了，然我们用$http来处理表单吧。

处理表单的语法看起来跟原始方式很像。好处是我们不需要手动抓取表单数据，或者注入，隐藏，添加类显示错误或成功信息。

01<!-- index.html -->
02 
03...
04 
05// process the form
06$scope.processForm = function() {
07    $http({
08        method  : 'POST',
09        url     : 'process.php',
10        data    : $.param($scope.formData),  // pass in data as strings
11        headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)
12    })
13        .success(function(data) {
14            console.log(data);
15 
16            if (!data.success) {
17                // if not successful, bind errors to error variables
18                $scope.errorName = data.errors.name;
19                $scope.errorSuperhero = data.errors.superheroAlias;
20            } else {
21                // if successful, bind success message to message
22                $scope.message = data.message;
23            }
24        });
25};
26 
27...

这就是我们的表单！没有添加或移除类。我们需要每次提交表单时都清楚错误。我们只需绑定变量和需要用到的视图。这非常棒，因为处理器用来处理数据，而视图用来显示数据.

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尽可能的简洁，我们可以使用简写方法：

1...
2    $http.post('process.php', $scope.formData)
3        .success(function(data) {
4            ...
5        });
6...

绝对更简洁更容易记住方法。

$http 内部控制器： 理想的，你可以将$http请求从controller移除到 service.这只是为了演示目的，我们将会尽快在service上进行讨论.

在视图中显示错误和信息

我们将使用指令ng-show和ng-class来处理我们的视图，Angular双方括号允许我们将变量放置在我们需要的地方。

ng-show: 根据变量值是否存在来显示或隐藏元素. 文档
ng-class: 根据变量值是否存在（或一些其他表达式）来添加或移除类. 文档

01<!-- index.html -->
02 
03...
04 
05    <!-- SHOW ERROR/SUCCESS MESSAGES -->
06    <div id="messages" ng-show="message">{{ message }}</div>
07 
08    <!-- FORM -->
09    <form>
10        <!-- NAME -->
11        <div id="name-group" class="form-group" ng-class="{ 'has-error' : errorName }">
12            <label>Name</label>
13            <input type="text" name="name" class="form-control" placeholder="Bruce Wayne">
14            <span class="help-block" ng-show="errorName">{{ errorName }}</span>
15        </div>
16 
17        <!-- SUPERHERO NAME -->
18        <div id="superhero-group" class="form-group" ng-class="{ 'has-error' : errorSuperhero }">
19            <label>Superhero Alias</label>
20            <input type="text" name="superheroAlias" class="form-control" placeholder="Caped Crusader">
21            <span class="help-block" ng-show="errorSuperhero">{{ errorSuperhero }}</span>
22        </div>
23 
24...