Il existe plusieurs façons de créer un appel AJAX. Le plus simple est d'utiliser Javascript Framework comme Mootools ou JQuery. Ajax est simple de cette façon.Vérifiez http://demos111.mootools.net/Ajax.Form pour les démos Mootools et jquery ici http://docs.jquery.com/Tutorials.
La logique est assez simple. Ajouter un événement à la zone de texte pour enregistrer la boîte une fois que la valeur change. Votre fonction d'événement va générer une requête Ajax et l'envoyer au serveur, recevoir une réponse que vous pouvez utiliser pour informer l'utilisateur de l'état de l'événement save, si vous le souhaitez.
Voici une petite chose que j'ai écrite pour vous, qui pourrait m'aider à comprendre. Devra inclure la bibliothèque Mootools. Pourrait avoir des bugs, mais le concept de l'appel Ajax est là. page = index.php
<?php
// PHP before anything else...
//
// Check to see if task is specified and need to save changes
if (isset($_POST['task']) && $_POST['task'] == 'save') {
// mysql connection
$text = $_POST['name'];
// insert query
$isSuccess = 'Status of SAVING CHANGES';
// Output... output will be used by 'update' to set value of <div id="log">...</div>
// so user knows what is happening
echo $isSuccess ? 'Successfully Saved' : 'Failed to Save';
exit();
}
?>
<html>
<head>
<!-- NEED TO INCLUDE MOOTOOLS LIBRARY -->
<script type="text/javascript">
window.addEvent('domready', function(){
$('name').addEvent('blur', saveChanges);
/**
* Generates request and saves changes
*/
function saveChanges(){
// URL which will be called
var url = "index.php";
// New Ajex request. Note that it will be sent because of .request() at the end
new Ajax(url, {
// Method : post/get
method: 'post',
// Data to be passed
data :{
name : $('name').value,
task : 'save'
},
// Output of the AJAX will be set to this element
update: $('log')
}).request();
}
});
</script>
</head>
<body>
<form action="index.php" onsubmit="return false">
<div id="log"></div>
<!-- SOME CONTENT ... -->
<input type="text" name="name" id="name" value="">
</form>
</body>
</html>