Traitement PHP et récupération variable PHP dans JavaScript avec AJAX pour l'afficher dans HTML
Bonjour,
j'ai un problème qui mélange JS avec ajax, PHP et HTML.
J'ai une page HTML avec un formulaire, un simple champ où je rentre un mot. je traite ce formulaire en PHP, il s'affiche dans une autre page.
Ce que je voudrai faire, c'est via ajax et l'objet XMLHttpRequest, donc sans recharger ma page html. récupérer le mot rentré dans le formulaire et l'afficher sur ma page html.
mon code index.html:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Test PHP</title>
<script>src="script.js"</script>
<script src="jquery-3.4.1.min.js"></script>
</head>
<body>
<form method="post" action="traitementAjax.php">
<p>Entrer un mot:<input type="text" name="mot" id="mot" autofocus/><button type="submit" id="submit">Submit</p>
<p id="responseAjax"></p>
</form>
</body>
</html> |
Mon code traitementAjax.php
Code:
1
2
3
4
| <?php
$mot=strtoupper($_POST["mot"]);
echo $mot;
?> |
Mon code script.js:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
| "use strict";
//méthode avec fetch qui fournit une meilleur alternative à XMLHttpRequest
/*fetch('traitementAjax.php', {method: 'POST'})
.then(response => {
if (response.ok) {
console.log(response.text());
document.getElementById('responseAjax').innerHTML = response.text();
}
})*/
//fetch avec jquery, pour éviter les problèmes de cross-origin
/*fetch('https://code.jquery.com/jquery-migrate-3.1.0.min.js')
.then(response => {
if (response.status === 200) {
return response.text()
}
})
.then(text => {
document.getElementById('responseAjax').innerHTML = response.text();
})*/
//méthode avec ajax et objet XMLHttpRequest(
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && this.status === 200) {
document.getElementById('responseAjax').innerHTML = xhr.responseXML;
}
}
xhr.open('POST', 'traitementAjax.php', true);
xhr.send();
//autre méthode youtube
/*$(document).ready(function() {
$("#submit").click(function() {
var mot = $("#mot").val();
var datastring = 'mot=' + mot;
if (name === '') {
$("#display").html('please Fill The Field');
}
else {
$.ajax({
type: "POST",
url: "traitementAjax.php",
data: datastring,
cache: false,
success: function(result){
$("#responseAjax").html(result);
}
})
}
return false;
})
})*/ |
Vous pouvez remarquer dans mon JS, que j'ai essayé plusieurs solutions, qui me donne le même résultat, affichage de mon mot traité par PHP (en MAJUSCULE) mais dans une nouvelle page. Moi ce que je veux, c'est l'afficher dans ma page html en dessous de mon champ de saisie, sans recharger la page (d'où ajax).
Donc pour moi, le problème viendrait de cette ligne dans mon js:
Code:
document.getElementById('responseAjax').innerHTML = xhr.responseXML;
Mais là, je suis à court d'idées...
D'avance, merci de votre aide.
