AngularJS でフォームを送信する方法の詳細な分析 programming

AngularJS が登場する前は、多くの開発者がフォーム送信の問題に直面していました。フォームを送信する方法が非常に多様であれば、人々を狂わせるのは簡単でしょう...しかし、それでも人々を狂わせるのです。

今日は、PHP を使用して送信されていたフォームと、それを Angular を使用するフォームに変換する方法を見ていきます。 Angular を使用してフォームを処理することは、私にとって「なるほど」と思った瞬間でした。 Angular の表面レベルには触れていませんが、ユーザーがフォーム送信の可能性を理解し、2 つのデータバインディングメソッドを理解するのに役立ちます。

このプロセスには jQuery プラットフォームを使用します。したがって、行うべき作業は最初に JavaScript を使用することです。フォームを送信し、エラーメッセージを表示し、エラークラスを追加し、JavaScript で情報の表示と非表示を切り替えます。

その後、Angular を使用します。必要な作業のほとんどは使用する前に行う必要があり、以前に行った作業の多くは非常に簡単になります。始めましょう。

シンプルなフォーム

フォームを送信する 2 つの方法に焦点を当てます:

古い方法: jQuery と PHP フォームの送信
新しい方法: AngularJS および PHP フォーム送信

まずフォームを見てください。非常にシンプルです:

2015619102411460.jpg (800×400)

形式要件

ページ更新フォーム処理を実装します
名前とスーパーヒーローの別名を入力
エラーがある場合はエラーメッセージが表示されます
入力が間違っている場合、入力は赤色になります
すべてのコンテンツに問題がない場合は、成功メッセージが表示されます

ドキュメント構造

デモでは、2 つのファイルのみが必要です

index.html
プロセス.php

フォーム処理

フォームを処理する新しい PHP を作成しましょう。ページは非常に小さく、データの送信に POST を使用します。

フォームの処理: これは私たちにとってそれほど重要ではありません。他の任意の言語を使用してフォームを処理できます。

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

ログイン後にコピー

これは非常に単純なフォーム処理スクリプトです。データが存在するかどうかのみを確認します。存在する場合は、処理や操作は実行されません。$errors 配列に情報を追加する必要があります。

AJAX 呼び出しのデータを返すには、echo と json_encode を使用する必要があります。 PHP フォーム処理で行う必要があるのはこれだけです。通常の jQuery AJAX または 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 を使用して、フォームの見栄えを軽減しました。ブートストラップ構文ルールを使用すると、各入力にはテキストのエラーメッセージを表示するスポットが含まれます。

2015619102451118.jpg (800×400)