Traitement PHP et récupération variable PHP dans JavaScript avec AJAX pour l'afficher dans HTML

**Cisman** · 24/10/2019, 21h51

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<?php 
$mot=strtoupper($_POST["mot"]);
echo $mot;
?>

Mon code script.js:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('responseAjax').innerHTML =  xhr.responseXML;

Mais là, je suis à court d'idées...

D'avance, merci de votre aide.

**Toufik83** · 24/10/2019, 23h11

Salut,

1-Commence d'abord par charger jQuery avant ton script js :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<script src="jquery-3.4.1.min.js"></script><!-- jQuery d'abord --> 
<script src="script.js"></script>

2-Ferme la balise <button> dans

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<button type="submit" id="submit">Submi

3-Utiliser la fonction $.ajax de jQuery :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(document).ready(function() {
    $("form").submit(function(e) {
        e.preventDefault();//c'est l'équivalente de return false
        var mot = $("#mot").val();
        if (mot.trim()== "") {
            $("#display").html('please Fill The Field');
        }
        else {
            $.ajax({
                method: "POST",//method au lieu de type
                url: "traitementAjax.php",
                data: {"mot":mot},//tu peux envoyer les données en tant qu'objet javascript {}
                cache: false
            })
            .done(function(result){//utiliser done au lieu de success
                   $("#responseAjax").html(result);
            })
            .fail(function(err){//utiliser fail pour voir si y'a des erreurs...
                   alert('Erreur ajax :'+err);
            })
        }
    });
});

**Cisman** · 25/10/2019, 06h26

Merci pour les corrections et explications.

Le résultats est le même, un nouvelle page s'ouvre avec mon mot en majuscule, et je ne vois plus ma page HTML.

**darkstar123456** · 25/10/2019, 08h42

Bonjour,

Ne pas utiliser l'événement click pour un formulaire.
En effet, cela permet juste de binder le bouton mais pas la soumission du formulaire.
De plus e.preventDefault() ne fonctionne pas pour les formulaires. Seul return false fonctionne.

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
$('body').on('submit', 'form', function(e) { // Pas d'ID ou de class sur le form, du coup je sélectionne tous les tags <form>
	e.preventDefault(); // Je le mets toujours mais ça sert à rien ici
	var $this = $(this);
	$.ajax({
		method: 'POST',
		url: $this.attr('action'),
		success: function(response) {
			console.log('response');
		}
	});
	return false;
});

**Toufik83** · 25/10/2019, 12h01

e.preventDefault() fonctionne aussi avec les formulaires si on utilise .submit et pas .click :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
$('form').submit(function(e){
    e.preventDefault();
    .....
});

Invité · 25/10/2019, 12h10

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

    <script>src="script.js"</script>

Quelqu'un a besoin de lunettes ici...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

    <script src="script.js"></script>

Traitement PHP et récupération variable PHP dans JavaScript avec AJAX pour l'afficher dans HTML [AJAX]

jQuery

Vue hybride

Discussions similaires

Partager

Partager