suchen

Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Analyse der Möglichkeit, Formulare in der AngularJS-Programmierung einzureichen_AngularJS

Detaillierte Analyse der Möglichkeit, Formulare in der AngularJS-Programmierung einzureichen_AngularJS

WBOY
WBOYOriginal
2016-05-16 15:53:541025Durchsuche

Vor dem Aufkommen von AngularJS standen viele Entwickler vor dem Problem der Formularübermittlung. Bei so vielen verschiedenen Möglichkeiten, ein Formular einzureichen, wäre es leicht gewesen, die Leute in den Wahnsinn zu treiben ... aber es macht die Leute immer noch verrückt.

Heute werfen wir einen Blick auf ein Formular, das früher mit PHP übermittelt wurde, und wie man es in Angular umwandelt. Die Verwendung von Angular zur Verarbeitung von Formularen war für mich ein Aha-Erlebnis. Auch wenn Angular nicht einmal oberflächlich betrachtet wird, hilft es Benutzern, das Potenzial der Formularübermittlung zu erkennen und die beiden Datenbindungsmethoden zu verstehen.

Wir werden für diesen Prozess die jQuery-Plattform verwenden. Die zu erledigende Arbeit besteht also darin, zunächst Javascript zu verwenden. Wir senden das Formular ab, zeigen Fehlermeldungen an, fügen Fehlerklassen hinzu und blenden Informationen in JavaScript ein und aus.


Danach werden wir Angular verwenden. Wir müssen den größten Teil der erforderlichen Arbeit erledigen, bevor wir es verwenden können, und viele der Arbeiten, die wir zuvor erledigt haben, werden sehr einfach sein. Fangen wir an.

Einfache Form

Wir konzentrieren uns auf zwei Möglichkeiten, das Formular einzureichen:

  • Der alte Weg: jQuery- und PHP-Formularübermittlung
  • Neue Methode: AngularJS- und PHP-Formularübermittlung

Schauen Sie sich zunächst unser Formular an, es ist ganz einfach:

2015619102411460.jpg (800×400)

Formelle Anforderungen

  • Implementieren Sie die Formularverarbeitung für die Seitenaktualisierung
  • Geben Sie den Namen und den Superhelden-Alias ​​ein
  • Wenn ein Fehler vorliegt, wird eine Fehlermeldung angezeigt
  • Wenn die Eingabe falsch ist, wird die Eingabe rot
  • Wenn alle Inhalte in Ordnung sind, wird eine Erfolgsmeldung angezeigt

Dokumentstruktur

In unserer Demo werden nur zwei Dateien benötigt

  • index.html
  • process.php


Formularverarbeitung

Lassen Sie uns ein neues PHP erstellen, um das Formular zu verarbeiten. Die Seite ist sehr klein und verwendet POST zum Senden von Daten.

Umgang mit Formularen: Das ist uns nicht so wichtig. Sie können für die Bearbeitung Ihres Formulars jede beliebige andere Sprache verwenden. 

// process.php
 
<&#63;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);
Dies ist ein sehr einfaches Formularverarbeitungsskript. Wir prüfen nur, ob die Daten vorhanden sind, es wird keine Verarbeitung oder Operation durchgeführt. Wenn sie nicht vorhanden sind, müssen wir eine Information zum $errors-Array hinzufügen.

Um unsere Daten für AJAX-Aufrufe zurückzugeben, müssen wir echo und json_encode verwenden. Das ist alles, was wir für die PHP-Formularverarbeitung tun müssen. Das Gleiche gilt für die Verwendung von gewöhnlichem jQuery AJAX oder Angular zur Verarbeitung von Formularen.
Anzeigeformular

Lassen Sie uns einen HTML-Code erstellen, um unser Formular anzuzeigen

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

Jetzt haben wir unser Formular. Wir haben auch Bootstrap verwendet, um das Formular weniger hässlich aussehen zu lassen. Unter Verwendung der Bootstrap-Syntaxregeln enthält jede Eingabe eine Stelle, an der die Fehlermeldung unseres Textes angezeigt wird.

2015619102451118.jpg (800×400)

Verwenden Sie jQuery, um das Formular abzusenden

Jetzt verwenden wir jQuery für die Formularübermittlung. Ich füge den gesamten Code in leere 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags
ein 

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

现在，如果表单中含有错误，则：

2015619102537437.jpg (800×400)

如果提交成功：

2015619102608037.jpg (800×400)

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

使用Angular提交表单

我们准备在之前使用的3f1c4e4b6b16bbbd69b2ee476dc4f83a标签中设置我们的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 class="brush:php;toolbar:false">
  {{ formData }}
...

现在，既然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双方括号允许我们将变量放置在我们需要的地方。

  • 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>
 
...

我们的表单完成了！通过强大的Angular，我们可以将这些愚蠢的显示/隐藏的js代码逻辑从视图中移走 了。现在我们的js文件只用来处理数据，并且视图可以做它自己的事情了。

我们的类和错误/成功等提示信息将在可获取时显示而不可获取时隐藏。当我们无须再像使用老的javascript那样担心是否已经考虑全面，这变得更加容易。你也无须再担心是否记得隐藏每处form提交时的那些错误信息。

Angular表单验证 获取更多表单验证的信息，请研读我们另一文章：AngularJS Form Validation。
结束语

现在我们已把美观的表单全部转变为Angular的了。我们共同学习了许多概念，希望你与它们接触更多，它们也将更易用。

回顾:

  •     创建一个Angular module
  •     创建一个Angular controller
  •     双向数据绑定
  •     ng-model绑定inputs
  •     ng-click提交表单
  •     使用双向数据绑定展示表单错误
  •     展示一个基于是否变量存在的div
  •     添加一个基于是否变量存在的类

这些Angular技术将在更庞大的应用中使用，你可以用它们创建许多好东西。祝Angular之途愉快，敬请期待更多深入的文章。同时，你也可以通过深入了解其指南，服务和厂商等来继续学习Angular。

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So entfernen Sie das #-Zeichen in der URL unter AngularJS_AngularJSNächster Artikel：So entfernen Sie das #-Zeichen in der URL unter AngularJS_AngularJS

In Verbindung stehende Artikel

Mehr sehen