Utiliser ajax de base :
-
Quelques notions de base côté serveur et côté client ;
-
Ned quelques notions de base en javascript (jquery);
-
Et quelques notions de base sur html et javascript.
Pour la première partie :
La programmation côté serveur consiste à écrire du code qui s'exécute sur le serveur, en utilisant des langages pris en charge par le serveur (tels que Java, PHP, C#; il est possible d'écrire du code qui s'exécute côté serveur en JavaScript). La programmation côté client consiste à écrire du code qui s'exécutera sur le client et se fait dans des langages pouvant être exécutés par le navigateur, tels que JavaScript, html et css.
Pour le second :
L'ajax est important pour déclarer le jQuery Core.
Exemple :
<head>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
Utilisez la dernière version de jQuery Core.
Avoir la notion de qui fonctionne AJAX.
Ajax fonctionne en suivant ces étapes :
- Un événement se produit dans une page Web (la page est chargée, un bouton est cliqué)
- Un objet XMLHttpRequest est créé par JavaScript
- L'objet XMLHttpRequest envoie une requête à un serveur Web
- Le serveur traite la requête
- Le serveur renvoie une réponse à la page Web
- La réponse est lue par JavaScript
- L'action appropriée (comme la mise à jour de la page) est effectuée par JavaScript
Pour en savoir plus, utilisez ce lien :https://www.w3schools.com/xml/ajax_intro.asp
Configurez la requête :
URL :
Tapez :Chaîne
Description :une chaîne contenant l'URL à laquelle la demande est envoyée.
données :
Type :PlainObject ou String ou Array
Description :Données à envoyer au serveur. Elle est convertie en une chaîne de requête, si ce n'est déjà une chaîne. Il est ajouté à l'URL pour les requêtes GET. Voir l'option processData pour empêcher ce traitement automatique. L'objet doit être une paire clé/valeur. Si la valeur est un tableau, jQuery sérialise plusieurs valeurs avec la même clé en fonction de la valeur du paramètre traditionnel (décrit ci-dessous).
dataType (par défaut :Intelligent Guess (xml, json, script ou html)) :
Tapez :Chaîne
Description :le type de données que vous attendez du serveur. Si aucun n'est spécifié, jQuery essaiera de le déduire en fonction du type MIME de la réponse (un type XML MIME produira XML, en 1.4 JSON produira un objet JavaScript, en 1.4 le script exécutera le script, et tout le reste sera renvoyé sous forme de chaîne). Les types disponibles (et le résultat passé comme premier argument de votre rappel de réussite) sont :
xml :renvoie un document XML pouvant être traité via jQuery.
html :renvoie le code HTML sous forme de texte brut ; les balises de script incluses sont évaluées lorsqu'elles sont insérées dans le DOM.
script :évalue la réponse en tant que JavaScript et la renvoie sous forme de texte brut. Désactive la mise en cache en ajoutant un paramètre de chaîne de requête, _=[TIMESTAMP], à l'URL, sauf si l'option de cache est définie sur true. Remarque :Cela transformera les POST en GET pour les requêtes de domaine distant.
json :évalue la réponse en tant que JSON et renvoie un objet JavaScript. Les requêtes "json" interdomaines sont converties en "jsonp" à moins que la requête n'inclue jsonp:false dans ses options de requête. Les données JSON sont analysées de manière stricte ; tout JSON malformé est rejeté et une erreur d'analyse est renvoyée. Depuis jQuery 1.9, une réponse vide est également rejetée; le serveur doit renvoyer une réponse null ou {} à la place. (Voir json.org pour plus d'informations sur le formatage JSON approprié.)jsonp :se charge dans un bloc JSON à l'aide de JSONP. Ajoute un "?callback=" supplémentaire à la fin de votre URL pour spécifier le rappel. Désactive la mise en cache en ajoutant un paramètre de chaîne de requête, "_=[TIMESTAMP]", à l'URL, sauf si l'option de cache est définie sur true.text :une chaîne de texte brut.plusieurs valeurs séparées par des espaces :depuis jQuery 1.5, jQuery peut convertir un dataType de ce qu'il a reçu dans l'en-tête Content-Type en ce dont vous avez besoin. Par exemple, si vous souhaitez qu'une réponse textuelle soit traitée comme XML, utilisez "text xml" pour le dataType. Vous pouvez également faire une requête JSONP, la faire recevoir sous forme de texte et l'interpréter par jQuery comme XML :"jsonp text xml". De même, une chaîne abrégée telle que "jsonp xml" tentera d'abord de convertir de jsonp en xml et, à défaut, de convertir de jsonp en texte, puis de texte en xml.
type (par défaut :'GET') :
Tapez :Chaîne
Description :La méthode HTTP à utiliser pour la requête (par exemple "POST", "GET", "PUT"). (version ajoutée : 1.9.0)
succès :
Type :Fonction (Données quelconques, String textStatus, jqXHR jqXHR )
Description :une fonction à appeler si la requête aboutit. La fonction reçoit trois arguments :Les données renvoyées par le serveur, formatées selon le paramètre dataType ou la fonction de rappel dataFilter, si spécifié; une chaîne décrivant l'état ; et l'objet jqXHR (dans jQuery 1.4.x, XMLHttpRequest). Depuis jQuery 1.5, le paramètre de réussite peut accepter un tableau de fonctions. Chaque fonction sera appelée tour à tour. Ceci est un événement Ajax.
Pour plus d'informations sur la configuration, utilisez le lien :http://api.jquery.com/jquery.ajax /
Exemple :
AJAX :
$.ajax({
url: 'test.php',
type: 'POST',
datatype: 'Json',
data: {'var1': val_1, 'var2': val_2},
success: function (response) {
$('.search-results').html(response);
}
});
PHP :
$val = $_POST['var1'];//recive the values from ajax
$val = $_POST['var2'];
...// The code to recive and create html code.
echo json_encode($html);//send values back to the main page.
Pour la troisième et dernière partie :
- Comment appeler la fonction javascript à partir de html et passer le paramètre entre les deux. Utilisez ce lien :comment appeler la fonction javascript à partir de html et passer le paramètre à travers elle
Un exemple de travail complet :
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Joseph Swanson</option>
<option value="4">Glenn Quagmire</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var var_1 =
$.ajax({
url: 'test.php',
type: 'POST',
datatype: 'Json',
data: {'q': str},
success: function (response) {
if(response.error_state = ""){
document.getElementById("txtHint").innerHTML = response.html;
}
else{
document.getElementById("txtHint").innerHTML = response.response.error_state;
}
}
});
}
}
</script>
</body>
</html>
PHP côté serveur (teste.php) :
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<?php
$q = intval($_POST['q']);
$error_state = "";
$con = mysqli_connect('localhost','peter','abc123','my_db');
if (!$con) {
//die('Could not connect: ' . mysqli_error($con));
$error_state = "<p>"."Could not connect:". mysqli_error($con)."</p>";
}
mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
$html = "<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
$html = $html. "<tr>";
$html = $html. "<td>" . $row['FirstName'] . "</td>";
$html = $html. "<td>" . $row['LastName'] . "</td>";
$html = $html. "<td>" . $row['Age'] . "</td>";
$html = $html. "<td>" . $row['Hometown'] . "</td>";
$html = $html. "<td>" . $row['Job'] . "</td>";
$html = $html. "</tr>";
}
$html = $html. "</table>";
mysqli_close($con);
echo json_encode (array(
'html'=>$html,
'error_state'=>$error_state
));
?>
</body>
</html>
En cas de doute, demandez simplement mon aide.
Bon travail! Et n'oubliez pas d'accepter la réponse si cela vous aide.
