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

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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)