Fuelphp-ajax
提供:Dev Guides
FuelPHP-Ajax
AJAXは、Webプログラミングの最新技術です。 ページを更新することなく、Webページ内のデータを非同期で送受信するオプションを提供します。 この章では、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レスポンスを返すことができます。 これら2つの方法を組み合わせて、シンプルでクリーンなAJAXベースのWebアプリケーションを作成できます。
実施例
従業員アプリケーションに新しいページ ajax/index を追加し、従業員情報を非同期に取得してみましょう。
- ステップ1 *-新しいコントローラーController_Ajaxをfuel/app/classes/controller/ajax.phpに作成します。
<?php
class Controller_Ajax extends Controller {
}
- ステップ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としてエンコードして、返します。 それ以外の場合は、対応するビューをレンダリングするだけです。
ステップ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')l('');
$('#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)l(employee['name']);
$('#age', e)l(employee['age']);
$('#employee').append(e);
}
},
error : function(xhr, textStatus, errorThrown) {
alert('Ajax request failed.');
}
});
});
});
</script>
</body>
</html>
ここでは、AJAX呼び出しを使用して従業員情報を読み込むためのアンカータグ(id:loademployee)を作成しました。 AJAX呼び出しは、JQueryを使用して行われます。 ユーザーがクリックすると、loademployeeタグに関連付けられたイベントがアクティブになります。 次に、AJAX呼び出しを使用して従業員情報を取得し、必要なHTMLコードを動的に生成します。
- ステップ4 *-アプリケーションを実行します。
最後に、アプリケーション http://localhost:8000/ajax/index を実行し、[従業員情報の読み込み]アンカータブをクリックします。