J'essaie de comprendre comment fonctionne l'interaction ajax-php pour le traitement d'un formulaire... Après des heures de recherches et de lecture j'ai bricolé le code ci-dessous; mais je n'obtiens pas le résultat escompter (exécution du code php + affichage résultat exécution dans la page).
Pourriez svp analyser mon code et me dire comment le faire fonctionner?
La page du formulaire, index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>test...</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type='text/javascript'>
function testajax () {
var texte = document.getElementById("field1").value;
var xhr_object = null;
if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else {
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
return;
}
xhr_object.open("POST", "./ajax.php", true);
xhr_object.onreadystatechange = function() {
if(xhr_object.readyState == 4) {
document.getElementById("put").innerHTML = xhr_object.responseText;
}
}
xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
var data = "field1="+texte;
xhr_object.send(data);
}
</script>
</head>
<body>
<form>
<input type="text" id="field1" name="field1" />
<input type="submit" value="go" onclick="testajax()" />
</form>
<div id="put"></div>
</body>
</html><?php
$field1 = $_POST['field1'];
echo $field1;
?>