FuelPHP - Ajax
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)
