Khung công tác PHP cung cấp các tùy chọn để nhận dạng liệu kiểu yêu cầu có phải là AJAX hay không. Lớp đầu vào có một phương thức, is_ajax ()cho mục đích này. Nếu một yêu cầu AJAX được thực hiện, phương thức Input :: is_ajax trả về true , nếu không thì false .
Phương pháp này được sử dụng để xử lý một yêu cầu AJAX đứng ở phía máy chủ.
if (Input::is_ajax()) { // Ajax request } else { // Normal request }Chúng ta có thể sử dụng json_encode để trả về phản hồi JSON. Chúng ta có thể kết hợp hai phương thức này để tạo ra một ứng dụng web dựa trên AJAX đơn giản và sạch sẽ.
Ví dụ làm việc
Chúng ta hãy thêm một trang mới, ajax / index trong ứng dụng nhân viên và cố gắng lấy thông tin nhân viên một cách không đồng bộ.
Bước 1 - Tạo một bộ điều khiển mới, Controller_Ajax tại nhiên liệu / app / classes / controller / ajax.php.
<?php class Controller_Ajax extends Controller { }Bước 2 - Tạo một hành động mới, action_index như sau.
<?php class Controller_Ajax extends Controller { public function action_index() { $emps = model_employee::find('all'); $data = array(); $i = 0; foreach($emps as $emp) { $data[$i] = array(); $data[$i]['name'] = $emp['name']; $data[$i]['age'] = $emp['age']; $i = $i + 1; } if(\Input::is_ajax()) { echo json_encode($data); } else { return \View::forge("ajax/index"); } } }Ở đây, nếu yêu cầu là AJAX, chúng tôi lấy thông tin sinh viên, mã hóa nó dưới dạng JSON và trả lại. Nếu không, chúng tôi chỉ hiển thị chế độ xem tương ứng.
Bước 3 - Tạo tập tin xem tương ứng, nhiên liệu / app / views / ajax / index.php như sau.
<html> <head> <script language = "javascript" src = "/assets/js/jquery-3.2.1.min.js"></script> <style> .table { border-collapse: collapse; } .table th, td { border-bottom: 1px solid #ddd; width: 250px; text-align: left; align: left; } </style> </head> <body> <a id = "loademployee" href = "#">Load employee information</a> </br> </br> <table class = "table"> <tbody id = "employee"> </tbody> </table> <script language = "javascript"> $(document).ready(function() { $("#loademployee").on("click", function(event) { $.ajax ({ url: '/ajax/index', type: 'POST', dataType: 'json', async: true, success: function(data, status) { var e = $('<tr><th>Name</th><th>Age</th></tr>'); $('#employee').html(''); $('#employee').append(e); for(i = 0; i < data.length; i++) { employee = data[i]; var e = $('<tr><td id = "name"></td><td id = "age"></td></tr>'); $('#name', e).html(employee['name']); $('#age', e).html(employee['age']); $('#employee').append(e); } }, error : function(xhr, textStatus, errorThrown) { alert('Ajax request failed.'); } }); }); }); </script> </body> </html>
Ở đây, chúng tôi đã tạo một thẻ neo (id: loademployee) để tải thông tin nhân viên bằng cách sử dụng cuộc gọi AJAX. Cuộc gọi AJAX được thực hiện bằng cách sử dụng JQuery. Sự kiện gắn liền với thẻ loademployee kích hoạt khi người dùng nhấp vào nó. Sau đó, nó sẽ lấy thông tin nhân viên bằng cách sử dụng cuộc gọi AJAX và tạo mã HTML được yêu cầu động.
Bước 4 - Chạy ứng dụng.
Cuối cùng, chạy ứng dụng, http: // localhost: 8000 / ajax / index và nhấn vào thẻ Load information anchor.Kết quả
 |
| ảnh minh họa |
Không có nhận xét nào:
Đăng nhận xét