Analisis terperinci tentang cara menghantar borang dalam AngularJS programming

Sebelum kemunculan AngularJS, ramai pembangun menghadapi masalah penyerahan borang. Dengan begitu banyak cara yang berbeza untuk menyerahkan borang, pastinya mudah untuk membuat orang gila... tetapi ia masih membuat orang gila.

Hari ini, kita akan melihat borang yang pernah dihantar menggunakan PHP dan cara menukarnya kepada menggunakan Angular. Menggunakan Angular untuk memproses borang adalah detik "aha" untuk saya. Walaupun ia tidak menyentuh tahap permukaan Angular, ia membantu pengguna melihat potensi penyerahan borang dan memahami dua kaedah pengikatan data.

Kami akan menggunakan platform jQuery untuk proses ini. Jadi kerja yang perlu dilakukan adalah menggunakan javascript terlebih dahulu. Kami akan menyerahkan borang, memaparkan mesej ralat, menambah kelas ralat dan menunjukkan serta menyembunyikan maklumat dalam JavaScript.

Selepas itu, kita akan menggunakan Angular. Kami perlu melakukan kebanyakan kerja yang diperlukan sebelum menggunakannya, dan banyak kerja yang kami lakukan sebelum ini akan menjadi sangat mudah. Jom mulakan.

Borang ringkas

Kami akan menumpukan pada dua cara untuk menyerahkan borang:

Cara lama: penyerahan borang jQuery dan PHP
Kaedah baharu: Penyerahan borang AngularJS dan PHP

Pertama lihat borang kami, ia sangat mudah:

2015619102411460.jpg (800×400)

Keperluan rasmi

Laksanakan pemprosesan borang muat semula halaman
Masukkan nama dan alias adiwira
Jika terdapat ralat, mesej ralat akan dipaparkan
Jika input tidak betul, input akan bertukar menjadi merah
Jika semua kandungan ok, mesej kejayaan akan dipaparkan

Struktur Dokumen

Dalam demo kami, hanya dua fail diperlukan

index.html
proses.php

Pemprosesan borang

Mari buat PHP baharu untuk mengendalikan borang. Halaman ini sangat kecil dan menggunakan POST untuk menyerahkan data.

Mengendalikan borang: Ini tidak begitu penting bagi kami. Anda boleh menggunakan mana-mana bahasa lain yang anda suka untuk memproses borang anda.

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

Salin selepas log masuk

Ini ialah skrip pemprosesan borang yang sangat mudah. Kami hanya menyemak sama ada data itu wujud Jika ia wujud, tiada pemprosesan atau operasi dilakukan Jika ia tidak wujud, kami perlu menambah sekeping maklumat pada tatasusunan $errors.

Untuk mengembalikan data kami untuk panggilan AJAX, kami perlu menggunakan echo dan json_encode. Ini sahaja yang perlu kita lakukan untuk pemprosesan borang PHP. Perkara yang sama berlaku untuk menggunakan jQuery AJAX atau Angular biasa untuk memproses borang.
Borang paparan

Mari buat HTML untuk memaparkan borang kami

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

Salin selepas log masuk

Sekarang, kami mempunyai borang kami. Kami juga menggunakan Bootstrap untuk menjadikan borang kelihatan kurang hodoh. Menggunakan peraturan sintaks Bootstrap, setiap input mengandungi tempat untuk memaparkan mesej ralat teks kami.

2015619102451118.jpg (800×400)

Gunakan jQuery untuk menyerahkan borang

Sekarang, mari gunakan jQuery untuk mengendalikan penyerahan borang. Saya akan menambah semua kod ke dalam tag kosong

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

Salin selepas log masuk

这里处理表单有不少的代码。我们有获取表单中变量的代码，有使用AJAX将数据发送至我们的表单的代码，有检查是否有错和显示成功提示的代码。除此之外，我们希望每次表单提交之后，过去的错误信息都会被清除。确实是不少代码。

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

2015619102537437.jpg (800×400)