fuelphp ajax

ajax 是一種現(xiàn)代網(wǎng)絡(luò)編程技術(shù)。它提供了在網(wǎng)頁中異步發(fā)送和接收數(shù)據(jù)的選項(xiàng)，無需刷新頁面。讓我們在本章中學(xué)習(xí) fuelphp ajax 編程。

fuelphp 框架提供了標(biāo)識請求類型是否為 ajax 的選項(xiàng)。為此，輸入類有一個方法 is_ajax()。如果發(fā)出 ajax 請求， input::is_ajax 方法返回 true，否則返回 false。

此方法用于在服務(wù)器端正確處理 ajax 請求。

if (input::is_ajax()) {  
   // ajax request  
} else {  
   // normal request  
} 

我們可以使用 json_encode 來返回 json 響應(yīng)。我們可以結(jié)合這兩種方法來創(chuàng)建一個簡單干凈的基于 ajax 的 web 應(yīng)用程序。

工作示例

讓我們在員工應(yīng)用程序中添加一個新頁面 ajax/index 并嘗試異步獲取員工信息。

第一步-在fuel/app/classes/controller/ajax.php 創(chuàng)建一個新控制器controller_ajax。

  
   class controller_ajax extends controller { 
   } </pre--> 
 

 

 
<b>步驟 2</b>-創(chuàng)建一個新動作，
 action_index 如下。
 
 
 
 
  
   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"); 
         } 
      } 
   }</pre--> 
 

 

 
這里，如果請求是 ajax，我們獲取學(xué)生信息，將其編碼為 json，然后返回。否則，我們只渲染相應(yīng)的視圖。
 
<b>step 3</b>-創(chuàng)建相應(yīng)的視圖文件，
 <b>fuel/app/views/ajax/index.php</b> 如下。
 
 
 
 
    
      <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>
   
   
   
      <a id="loademployee" href="#">load employee information</a>       
 
      

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

 

 
這里，我們創(chuàng)建了一個錨標(biāo)簽（id：loademployee）來使用 ajax 調(diào)用加載員工信息。 ajax 調(diào)用是使用 jquery 完成的。當(dāng)用戶單擊它時(shí)，附加到 loademployee 標(biāo)簽的事件會激活。然后，它將使用 ajax 調(diào)用獲取員工信息并動態(tài)生成所需的 html 代碼。
 
<b>步驟 4</b>-運(yùn)行應(yīng)用程序。
 
最后，運(yùn)行應(yīng)用程序，
 <b>http://localhost:8000/ajax/index</b> 并單擊加載員工信息錨選項(xiàng)卡。
 
 
<h2>結(jié)果</h2>
 <img src="/public/core/edit/php/../attached/20231217204132_22340.jpg" alt="" border="0" />

                        
                        
<h3><a href="/s7900103/fuelphp hmvc 請求.html">下一節(jié)：fuelphp hmvc 請求</a></h3>
<h3><a href="/php/php_sz/153.html">fuelphp 教程</a></h3>