Pour effectuer une demande Ajax à l'aide de jQuery, vous pouvez le faire à l'aide du code suivant.
HTML:
<form id="foo">
<label for="bar">A bar</label>
<input id="bar" name="bar" type="text" value="" />
<input type="submit" value="Send" />
</form>
<!-- The result of the search will be rendered inside this div -->
<div id="result"></div>
JavaScript:
Méthode 1
/* Get from elements values */
var values = $(this).serialize();
$.ajax({
url: "test.php",
type: "post",
data: values ,
success: function (response) {
// You will get response from your PHP page (what you echo or print)
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
Méthode 2
/* Attach a submit handler to the form */
$("#foo").submit(function(event) {
var ajaxRequest;
/* Stop form from submitting normally */
event.preventDefault();
/* Clear result div*/
$("#result").html('');
/* Get from elements values */
var values = $(this).serialize();
/* Send the data using post and put the results in a div. */
/* I am not aborting the previous request, because it's an
asynchronous request, meaning once it's sent it's out
there. But in case you want to abort it you can do it
by abort(). jQuery Ajax methods return an XMLHttpRequest
object, so you can just use abort(). */
ajaxRequest= $.ajax({
url: "test.php",
type: "post",
data: values
});
/* Request can be aborted by ajaxRequest.abort() */
ajaxRequest.done(function (response, textStatus, jqXHR){
// Show successfully for submit message
$("#result").html('Submitted successfully');
});
/* On failure of request this function will be called */
ajaxRequest.fail(function (){
// Show error
$("#result").html('There is error while submit');
});
Le .success(), .error()et .complete()callbacks sont OBSOLETE jQuery 1.8 . Pour préparer votre code pour leur suppression éventuelle, utiliser .done(), .fail()et à la .always()place.
MDN: abort(). Si la demande a déjà été envoyée, cette méthode annulera la demande.
Nous avons donc réussi à envoyer une demande Ajax, et il est maintenant temps de récupérer les données sur le serveur.
PHP
Comme nous faisons une demande POST dans un appel Ajax ( type: "post"), nous pouvons maintenant grab données à l' aide $_REQUESTou $_POST:
$bar = $_POST['bar']
Vous pouvez également voir ce que vous obtenez dans la demande POST par l'un ou l'autre simplement. BTW, assurez-vous qu'il $_POSTest réglé. Sinon, vous obtiendrez une erreur.
var_dump($_POST);
// Or
print_r($_POST);
Et vous insérez une valeur dans la base de données. Assurez-vous de sensibiliser ou d' échapper à toutes les demandes (que vous ayez effectué un GET ou un POST) correctement avant de lancer la requête. Le mieux serait d'utiliser des déclarations préparées .
Et si vous souhaitez renvoyer des données sur la page, vous pouvez le faire en faisant simplement écho à ces données comme ci-dessous.
// 1. Without JSON
echo "Hello, this is one"
// 2. By JSON. Then here is where I want to send a value back to the success of the Ajax below
echo json_encode(array('returned_val' => 'yoho'));
Et puis vous pouvez l'obtenir comme:
ajaxRequest.done(function (response){
alert(response);
});
Il existe quelques méthodes abrégées . Vous pouvez utiliser le code ci-dessous. Il fait le même travail.
var ajaxRequest= $.post("test.php", values, function(data) {
alert(data);
})
.fail(function() {
alert("error");
})
.always(function() {
alert("finished");
});