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

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

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** · 25/10/2019, 00h11

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, 07h26

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, 09h42

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, 13h01

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, 13h10

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>

**Cisman** · 25/10/2019, 14h29

c'était ça, j'ai besoin de repos.

Que conseillez-vous comme ide ou astuce pour éviter ce genre de bêtise qui m'a fait perdre une journée complète?

**darkstar123456** · 25/10/2019, 14h43

Un bon IDE avec une coloration syntaxique claire et qui souligne les erreurs ;-)

Perso, j'utilise Netbeans

Invité · 25/10/2019, 14h45

Il aurait suffit de mettre alert('OK ?'); au début de ton script pour constater qu'il ne chargeait pas.
C'est ce que je fais régulièrement.

Quant à la coloration syntaxique... : si on ne regarde pas où il faut ou si on ne fait pas attention... on passe à coté.

Code :

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

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

C'est la même coloration !

@Toufik83 , @darkstar123456
La preuve : vous ne l'aviez pas vu non plus. *

* La différence est que j'ai répondu à beaucoup plus de discussions que vous.
J'ai donc une certaine habitude des "erreurs" de toute forme.

**darkstar123456** · 25/10/2019, 14h57

Je suis assez d'accord pour alert() bien que j'utilise plutôt console.log() car j'aime pas les trucs bloquants

Et comme l'a dit @jreaux62, c'est clairement LE truc de base à faire, et que je pense tous les habitués font ^^

Pour ce qui est de la coloration syntaxique, il est difficile de comparer celle du forum à un IDE.
Quand j'en parlais, c'était clairement dans l'IDE ^^

Voilà ce que ça donne dans mon Netbeans, c'est quand même clairement plus visible (et y'a un "!" à la place du numéro de ligne)
Nom : Capture_02.PNG
Affichages : 1020
Taille : 2,4 Ko

Nom : Capture_02.PNG
Affichages : 1020
Taille : 2,4 Ko

Invité · 25/10/2019, 15h04

Envoyé par darkstar123456

Je suis assez d'accord pour alert() bien que j'utilise plutôt console.log() car j'aime pas les trucs bloquants

C'est justement la raison pour laquelle j'utilise alert() dans CE CAS particulier !
Si l'alerte s'affiche, alors c'est bon (et je supprime l'alerte).

Sinon, en effet, j'utilise console.log().

Envoyé par darkstar123456

...Voilà ce que ça donne dans mon Netbeans, c'est quand même clairement plus visible (et y'a un "!" à la place du numéro de ligne)...

OK.
(j'utilise notepad++, qui n'affiche pas de "!"...)

**Toufik83** · 25/10/2019, 15h05

@jreaux62 c'est vrai que je ne l'ai pas vu.
Cisman il faut toujours ouvrir l'outil de développement et regarder ce qui est écrit sous les onglets console et Network pour voir les erreurs.

**Cisman** · 25/10/2019, 15h55

J'ouvre la console à chaque fois, mais là il n'y avait pas d'erreur.

Je vais utiliser alert ou console OK

Je comptais tester Netbeans justement, je l'utilise déjà en JAVA. Des conseils sur un plugins à installer?

Merci des conseils et du coup de main.

**Toufik83** · 26/10/2019, 00h57

Envoyé par Cisman

Des conseils sur un plugins à installer?

Je ne pense pas que tu as besoin d'installer un plugin pour ton cas, une requête Ajax est largement suffisante.
Mais si tu veux quand même apprendre d'autres techniques concernant l'utilisation d'ajax, essaies plutôt de faire la même chose avec le type de donnée json dataType:"json".

**Cisman** · 26/10/2019, 13h37

J'ai déjà utilisé ajax avec json, pour un site méteo, je lisais un fichier json pour savoir quel données afficher et quel unité de mesure utiliser.

**NoSmoking** · 29/10/2019, 19h54

Bonjour,

Envoyé par jreaux62

Quant à la coloration syntaxique... : si on ne regarde pas où il faut ou si on ne fait pas attention... on passe à coté.
(...)
C'est la même coloration !

Pas si l'on ajoute le type de code, ci-dessous [CODE=html]..[/CODE]

Code html :

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

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

Ceci dit il n'y a aucune erreur de syntaxe à écrire

Code html :

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

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

on déclare une variable, sans mot clé certes, qui vaut la chaîne "script.js".

Envoyé par darkstar123456

Voilà ce que ça donne dans mon Netbeans, c'est quand même clairement plus visible (et y'a un "!" à la place du numéro de ligne)

Dans ce cas il signale juste un warning, il y a juste quelque chose qui lui semble bizarre !

Envoyé par Cisman

Que conseillez-vous comme ide ou astuce pour éviter ce genre de bêtise qui m'a fait perdre une journée complète?

Il n'y a pas grand chose à faire en cas de grosse fatigue et les erreurs d’inattention si ce n'est prendre du recul en allant faire un tour et tout remettre en cause. Avec l'expérience tu retrouveras facilement une telle erreur.

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

jQuery

Discussions similaires

Partager

Partager