FuelPHP - Ajax
AJAX è una moderna tecnologia nella programmazione web. Fornisce opzioni per inviare e ricevere dati in una pagina Web in modo asincrono, senza aggiornare la pagina. Impariamo a conoscere la programmazione di FuelPHP AJAX in questo capitolo.
Il framework FuelPHP fornisce opzioni per identificare se il tipo di richiesta è AJAX o meno. La classe di input ha un metodo,is_ajax()per questo scopo. Se viene effettuata una richiesta AJAX,Input::is_ajax restituisce il metodo true, altrimenti false.
Questo metodo viene utilizzato per gestire correttamente una richiesta AJAX sul lato server.
if (Input::is_ajax()) {
// Ajax request
} else {
// Normal request
}Possiamo usare json_encodeper restituire la risposta JSON. Possiamo combinare questi due metodi per creare un'applicazione web basata su AJAX semplice e pulita.
Esempio di lavoro
Aggiungiamo una nuova pagina, ajax/index nell'applicazione dei dipendenti e provare a recuperare le informazioni sui dipendenti in modo asincrono.
Step 1 - Crea un nuovo controller, Controller_Ajax in fuel / app / classes / controller / ajax.php.
<?php
class Controller_Ajax extends Controller {
}Step 2- Crea una nuova azione, action_index come segue.
<?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");
}
}
}Qui, se la richiesta è AJAX, recuperiamo le informazioni sugli studenti, le codifichiamo come JSON e le restituiamo. Altrimenti, eseguiamo semplicemente il rendering della vista corrispondente.
Step 3 - Crea il file di visualizzazione corrispondente, fuel/app/views/ajax/index.php come segue.
<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>Qui, abbiamo creato un tag di ancoraggio (id: loademployee) per caricare le informazioni sui dipendenti utilizzando la chiamata AJAX. La chiamata AJAX viene eseguita utilizzando JQuery. L'evento allegato al tag loademployee si attiva quando un utente fa clic su di esso. Quindi, recupererà le informazioni sui dipendenti utilizzando la chiamata AJAX e genererà dinamicamente il codice HTML richiesto.
Step 4 - Esegui l'applicazione.
Infine, esegui l'applicazione, http://localhost:8000/ajax/index e fare clic sulla scheda Carica ancoraggio informazioni sui dipendenti.
Risultato
