Ajax

优质

小牛编辑

138浏览

2023-12-01

AJAX是一种现代网络编程技术。它提供了在网页中异步发送和接收数据的选项，无需刷新页面。让我们在本章中了解FuelPHP AJAX编程。

FuelPHP框架提供了用于标识请求类型是否为AJAX的选项。为此，输入类有一个方法is_ajax() 。如果发出了AJAX请求，则Input::is_ajax方法返回true ，否则返回false 。

此方法用于在服务器端正确处理AJAX请求。

if (Input::is_ajax()) {  
   // Ajax request  
} else {  
   // Normal request  
}

我们可以使用json_encode来返回JSON响应。我们可以将这两种方法结合起来，创建一个简单而干净的基于AJAX的Web应用程序。

工作示例 (Working Example)

让我们在员工应用程序中添加一个新页面ajax/index ，并尝试异步获取员工信息。

Step 1 - 在fuel/app/classes/controller/ajax.php中创建一个新控制器Controller_Ajax。

<?php  
   class Controller_Ajax extends Controller { 
   }

Step 2 - 创建一个新动作， action_index如下。

<?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"); 
         } 
      } 
   }

这里，如果请求是AJAX，我们获取学生信息，将其编码为JSON，然后返回。否则，我们只渲染相应的视图。

Step 3 - 创建相应的视图文件， fuel/app/views/ajax/index.php如下。

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

在这里，我们创建了一个锚标记（id:loademployee）来使用AJAX调用加载员工信息。 AJAX调用是使用JQuery完成的。附加到loademployee标记的事件会在用户单击时激活。然后，它将使用AJAX调用获取员工信息并动态生成所需的HTML代码。

Step 4 - 运行应用程序。

最后，运行应用程序http://localhost:8000/ajax/index ，然后单击Load employee information anchor选项卡。

结果 (Result)