Non generare codice, invece di generare valori.
Perché è necessario l'incapsulamento
Suggerisco di evitare la generazione del codice da una lingua all'altra per due motivi:
- Rende il codice difficile da leggere; piccoli frammenti di JavaScript tra le righe di PHP non possono essere raccolti dagli IDE ed è difficile da seguire anche per i programmatori esperti in entrambe le lingue.
- Interrompe l'incapsulamento poiché si mescola inevitabilmente il codice di front-end con il codice back-end.
Come incapsulare
JavaScript è un potente linguaggio di scripting lato client che consente di eseguire un'intera gamma di funzioni nel browser del client; una di queste funzioni sta facendo richieste HTTP per raccogliere informazioni e dati che richiede. Qui puoi trovare un'introduzione a AJAX e XMLHttpRequests:
Introduzione - Ajax | MDN
Ciò consente di scrivere un file JavaScript che esegue la funzione che si intende eseguire ma che non contiene i dati necessari per eseguirlo. Questo script può inviare una richiesta al tuo server a una diversa risorsa che genera i dati. Una volta che ha le informazioni, può quindi procedere.
XMLHttpRequest come questo può anche essere eseguito in linea o in modo asincrono; cioè può essere fatto prima che la pagina finisca il caricamento o può essere fatto in background dopo che la pagina ha finito il rendering.
Usando questa funzione di JavaScript, separerai completamente il tuo codice lato client e il tuo codice lato server.
Come scambiare dati
Per semplici scambi di dati ti suggerirei di usare il formato JSON, è ben supportato in PHP (con funzioni native che possono convertire sia da e verso JSON) sia, ovviamente, in JavaScript dove può essere facilmente decodificato in variabili .
Puoi trovare un'introduzione al formato dei dati JSON qui: JSON - JavaScript | MDN
Per scambiare i dati semplicemente:
Genera il file JSON
Raccogli le variabili che desideri passare al client come una raccolta di variabili PHP (cioè matrici, numeri interi, ecc.). Quindi li si passa attraverso la funzione json_encode e quindi si stampa il valore risultante nel buffer di output.
Decodifica il file JSON
Quando il file JavaScript recupera il JSON, è semplice analizzare i dati e sarai premiato con tutti i dati necessari come variabili JavaScript valide.
Un semplice esempio
Ad esempio, supponiamo che desideri che la tua pagina web presenti i risultati di ricerca a un utente ma non desideri che facciano una nuova richiesta di pagina ogni volta che fanno clic su "cerca" (i carichi di pagina sono un problema , dopotutto).
Inizierebbe con la pagina dei risultati di ricerca; questo fornisce il modello e ordina al client di ottenere il file JavaScript.
search.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Search Results | MyApp</title>
<script type="application/javascript" src="search.js"></script>
</head>
<body>
<h1>Search</h1>
<form>
<input type="text" value="Search..." onchange="search(this.value);">
</form>
<h1>Results</h1>
<div id="results_container"></div>
</body>
</html>
search.js
// First all the code that fetches the data from the server
var search = function(keyword) {
if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6 and older
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
// Set a function that will process the response
httpRequest.onreadystatechange = function() {
// If the request is complete
if (httpRequest.readyState === 4) {
// If the request succeeded
if (httpRequest.status === 200) {
// clear old results
document.getElementById('results_container').innerHTML = '';
// print new results
var data = JSON.parse(httpRequest.responseText);
for(x=0; x < data.length; x++) {
addResult(data[x]['item']);
}
// If the request failed
} else {
console.log('Uh Oh! something went wrong...');
}
// If the request is not complete
} else {
console.log('No problem... I\'ll just wait longer.');
}
};
httpRequest.open('GET', 'http://www.example.org/search.php?keyword='+keyword, true);
}
// And then, all the code that does the processing stuff
var addResult = function(name) {
item = document.createElement("div");
item.innerText = name;
document.getElementById('results_container').appendChild(item);
}
search.php
header('Content-Type: application/json')
$keyword = $_GET['keyword'];
// validate the keyword for malicious input
$resultsArray = // Do something like query a DB, parse a .txt file, ask a carrier pigeon, et al.
// for example purposes, suppose we have the following result array:
$resultsArray = [
['relevancy' => 3.7, 'item' => 'horse'],
['relevancy' => 1.8, 'item' => 'cart'],
['relevancy' => 2.1, 'item' => 'ass'],
['relevancy' => 2.1, 'item' => 'donkey'],
];
function compare_relevancy($a, $b) {
if ($a['relevancy'] == $b['relevancy']) return 0;
return ($a['relevancy'] < $b['relevancy']) ? -1 : 1;
}
// Sort the results
usort($resultsArray, 'compare_relevancy');
// Output the results as JSON
echo json_encode($resultsArray);
Ovviamente è un'implementazione incompleta, ma è un esempio funzionante di come passare i dati tra un back-end PHP e un front-end JavaScript.