Gửi biểu mẫu AJAX bằng JQuery
Trong khi JavaScript vani tiếp tục bắt kịp JQuery về khả năng và tính nhất quán trên nhiều trình duyệt, thì việc xử lý các biểu mẫu gửi trong JavaScript vẫn có thể là một bãi mìn của các lỗi và sự không nhất quán.Những gì ta sẽ xây dựng: Có một vài yêu cầu cơ bản thường được yêu cầu từ các biểu mẫu. Ta muốn:
- Xử lý biểu mẫu mà không cần làm mới trang bằng AJAX
- Xác thực phía khách hàng
- Xác thực phía server (xác thực từ phía PHP)
- Hiển thị biểu tượng xử lý trong khi biểu mẫu của ta đang… xử lý
- Hiển thị lỗi nếu có
- Hiển thị thành công nếu biểu mẫu được gửi chính xác
Bắt đầu
Hãy bắt đầu xử lý biểu mẫu của ta . Ta cần ba thứ khác nhau cho việc này:
- Một cách để xử lý biểu mẫu ( ta sẽ sử dụng PHP, nhưng bạn có thể sử dụng bất kỳ thứ gì bạn muốn)
- Chế độ xem để hiển thị biểu mẫu
- JavaScript và AJAX (có thêm jQuery) để làm cho tất cả hoạt động
Xử lý biểu mẫu bằng PHP
Đây sẽ là phần dễ nhất. Vì ta đang sử dụng PHP, ta chỉ có thể tạo một tập lệnh đơn giản để xử lý biểu mẫu của bạn . Hãy gọi nó là process.php (thông minh mà tôi biết) và tạo mã cho điều đó.
Ta sẽ cung cấp hỗ trợ để gửi lại dữ liệu JSON (là những gì mã JavaScript của ta sẽ được xử lý sau khi PHP hoặc bất kỳ mã phía server nào của ta gửi lại thông tin). Ta cũng sẽ gửi lại các lỗi và thông báo lỗi trong dữ liệu mà ta gửi lại.
Ta sẽ chỉ kiểm tra xem một biến có tồn tại hay không. Có nhiều cách xác thực khác mà bạn có thể thực hiện như kiểm tra xem có email hợp lệ hay không , nhưng ta sẽ chỉ tập trung vào trạng thái bắt buộc.
<?php $errors = array(); // array to hold validation errors $data = array(); // array to pass back data // validate the variables ====================================================== // if any of these variables don't exist, add an error to our $errors array if (empty($_POST['name'])) $errors['name'] = 'Name is required.'; if (empty($_POST['email'])) $errors['email'] = 'Email is required.'; if (empty($_POST['superheroAlias'])) $errors['superheroAlias'] = 'Superhero alias is required.'; // return a response =========================================================== // if there are any errors in our errors array, return a success boolean of false 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 process our form, then return a message // DO ALL YOUR FORM PROCESSING HERE // THIS CAN BE WHATEVER YOU WANT TO DO (LOGIN, SAVE, UPDATE, WHATEVER) // show a message of success and provide a true success variable $data['success'] = true; $data['message'] = 'Success!'; } // return all our data to an AJAX call echo json_encode($data); Lưu ý trong PHP, để chuyển dữ liệu trở lại lệnh gọi JavaScript của ta , bạn muốn echo json_encode() . Sử dụng return như bạn thường làm trong một hàm sẽ không cung cấp lại dữ liệu JSON.
Bây giờ ta đã xử lý xong biểu mẫu, ta sẽ tạo biểu mẫu của bạn .
Hiển thị biểu mẫu trong HTML
Ta sẽ sử dụng Bootstrap để xây dựng quan điểm của ta . Nó chỉ dễ dàng hơn vì tất cả các lớp của chúng đã được tạo sẵn và ta có thể tạo chế độ xem của bạn một cách nhanh chóng.
Ta sẽ đặt tất cả mã ta cần cho chế độ xem của bạn và đưa lỗi vào chế độ xem sau.
<!doctype html> <html> <head> <title>Look I'm AJAXing!</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <!-- load bootstrap via CDN --> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <!-- load jquery via CDN --> <script src="form.js"></script> <!-- load our javascript file --> </head> <body> <div class="col-sm-6 col-sm-offset-3"> <h1>Processing an AJAX Form</h1> <!-- OUR FORM --> <form action="process.php" method="POST"> <!-- NAME --> <div id="name-group" class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" name="name" placeholder="Henry Pym"> <!-- errors will go here --> </div> <!-- EMAIL --> <div id="email-group" class="form-group"> <label for="email">Email</label> <input type="text" class="form-control" name="email" placeholder="rudd@avengers.com"> <!-- errors will go here --> </div> <!-- SUPERHERO ALIAS --> <div id="superhero-group" class="form-group"> <label for="superheroAlias">Superhero Alias</label> <input type="text" class="form-control" name="superheroAlias" placeholder="Ant Man"> <!-- errors will go here --> </div> <button type="submit" class="btn btn-success">Submit <span class="fa fa-arrow-right"></span></button> </form> </div> </body> </html> Đây là những gì nó trông giống như:
Xử lý Logic Gửi Biểu mẫu bằng JavaScript
Để gửi biểu mẫu qua AJAX, ta cần thực hiện một số việc trong file JavaScript của bạn .
- Chụp nút gửi biểu mẫu để hành động mặc định không diễn ra
- Lấy tất cả dữ liệu từ biểu mẫu của ta bằng jQuery
- Gửi bằng AJAX ( ta sẽ xem xét một số cách)
- Hiển thị lỗi nếu có
Ta sẽ bắt đầu file JavaScript của bạn bằng cách lấy dữ liệu từ biểu mẫu của ta và gửi yêu cầu POST đến tập lệnh PHP đã tạo của ta ( process.php ).
$(document).ready(function() { // process the form $('form').submit(function(event) { // get the form data // there are many ways to get this data using jQuery (you can use the class or id also) var formData = { 'name' : $('input[name=name]').val(), 'email' : $('input[name=email]').val(), 'superheroAlias' : $('input[name=superheroAlias]').val() }; // process the form $.ajax({ type : 'POST', // define the type of HTTP verb we want to use (POST for our form) url : 'process.php', // the url where we want to POST data : formData, // our data object dataType : 'json', // what type of data do we expect back from the server encode : true }) // using the done promise callback .done(function(data) { // log data to the console so we can see console.log(data); // here we will handle errors and validation messages }); // stop the form from submitting the normal way and refreshing the page event.preventDefault(); }); }); Bây giờ khi ta nhấn gửi trên biểu mẫu của bạn , mã JavaScript của ta sẽ nhận được tất cả các giá trị đầu vào mà ta cần và gửi một yêu cầu POST tới process.php .
Promise Callbacks : Ta sẽ sử dụng .done gọi lại .done để xử lý một yêu cầu AJAX thành công. Điều này từng được gọi là .success nhưng từ đó không được dùng nữa trong jQuery 1.8+.
Một cách khác để tuần tự hóa dữ liệu biểu mẫu
Bạn cũng có thể sử dụng serialize thay vì kéo thông tin biểu mẫu riêng lẻ.
Thấy dữ liệu JSON quay trở lại
Tập lệnh PHP của ta sẽ xử lý các đầu vào mà lệnh gọi AJAX của ta đã gửi và lấy lại mảng $data[] mà ta đã tạo. Bạn có thể thấy điều này trong console của trình duyệt sau khi bạn gửi biểu mẫu của bạn .
Bạn có thể truy cập bất kỳ thuộc tính nào trong số này như một phần của đối tượng data của bạn . Chỉ cần sử dụng . để đến một mặt hàng cụ thể.
Xử lý lỗi
Trong tập lệnh PHP của ta , ta chỉ kiểm tra đảm bảo rằng tất cả các trường là bắt buộc. Nếu một trường không xuất hiện, ta sẽ gửi lại lỗi. Ta muốn thông báo cho user của ta về lỗi này.
Ta sẽ thêm lỗi cho mỗi đầu vào. Các lớp Bootstrap giúp ta thực hiện việc này, vì vậy hãy tiếp tục và xử lý các lỗi đó và đưa chúng vào trang của ta nếu chúng xảy ra.
... // process the form $.ajax({ type : 'POST', // define the type of HTTP verb we want to use (POST for our form) url : 'process.php', // the url where we want to POST data : formData, // our data object dataType : 'json' // what type of data do we expect back from the server }) // using the done promise callback .done(function(data) { // log data to the console so we can see console.log(data); // here we will handle errors and validation messages if ( ! data.success) { // handle errors for name --------------- if (data.errors.name) { $('#name-group').addClass('has-error'); // add the error class to show red input $('#name-group').append('<div class="help-block">' + data.errors.name + '</div>'); // add the actual error message under our input } // handle errors for email --------------- if (data.errors.email) { $('#email-group').addClass('has-error'); // add the error class to show red input $('#email-group').append('<div class="help-block">' + data.errors.email + '</div>'); // add the actual error message under our input } // handle errors for superhero alias --------------- if (data.errors.superheroAlias) { $('#superhero-group').addClass('has-error'); // add the error class to show red input $('#superhero-group').append('<div class="help-block">' + data.errors.superheroAlias + '</div>'); // add the actual error message under our input } } else { // ALL GOOD! just show the success message! $('form').html('<div class="alert alert-success">' + data.message + '</div>'); } }); ... Bây giờ nếu có bất kỳ lỗi nào xuất hiện trở lại từ server của ta , ta có thể hiển thị chúng như sau:
Và nếu biểu mẫu AJAX của ta thành công:
Xóa lỗi
Mỗi khi ta gửi biểu mẫu, lỗi của ta từ lần gửi trước của ta vẫn còn đó. Ta chỉ cần xóa chúng bằng cách xóa chúng ngay sau khi biểu mẫu được gửi lại.
... // process the form $('form').submit(function(event) { $('.form-group').removeClass('has-error'); // remove the error class $('.help-block').remove(); // remove the error text ... Hiển thị lỗi server
Nếu có lỗi trong mã phía server của ta , ta sẽ không nhận được bất kỳ phản hồi nào từ cuộc gọi AJAX của ta . Ta sẽ chỉ ở đó mà vò đầu bứt tai. Có một giải pháp đơn giản cho điều đó: ta sẽ thêm thuộc tính error vào lệnh gọi AJAX của ta .
... // process the form $.ajax({ type : 'POST', // define the type of HTTP verb we want to use (POST for our form) url : 'process.php', // the url where we want to POST data : formData, // our data object dataType : 'json' // what type of data do we expect back from the server }) // using the done promise callback .done(function(data) { ... }) // using the fail promise callback .fail(function(data) { //Server failed to respond - Show an error message $('form').html('<div class="alert alert-danger">Could not reach server, please try again later.</div>'); }); ... Bây giờ nếu server bị hỏng hoặc bị hỏng vì bất kỳ lý do gì, user cố gắng gửi biểu mẫu sẽ nhận được:
Cleaner JS với Phương thức $ .post
Nếu bạn không muốn viết tất cả mã AJAX đó ra mỗi lần, có một cách dễ dàng hơn! Bạn có thể sử dụng phương thức viết tắt jQuery POST . Điều này cho phép bạn đơn giản hóa mã của bạn và vẫn nhận được kết quả tương tự.
Đoạn mã trên sẽ tương đương với:
$.post('process.php', function(formData) { // place success code here }) .fail(function(data) { // place error code here }); Sạch hơn nhiều!
Kết luận
Gửi biểu mẫu bằng JQuery và AJAX là một quá trình khá dễ dàng và hy vọng điều này sẽ giúp bạn trong hành trình tạo biểu mẫu và xử lý chúng mà không cần làm mới trang.
Bài viết này chỉ đề cập đến phần xác thực phía server của các biểu mẫu. Bạn cũng cần xem xét việc thực hiện xác thực phía client và thực hiện nhiều hơn là chỉ xác thực bắt buộc. Có rất nhiều tài nguyên sẵn có để thúc đẩy và như mọi khi, hãy đặt câu hỏi trong phần comment nếu bạn cần bất kỳ trợ giúp nào!
Các tin liên quan
