Lancer un script php avec AJAX

**laguernette** · 23/02/2019, 19h27

Bonjour,

J'ai créé une page où lorsque je clique sur une DIV, je souhaiterais qu'un script php se lance. Il sera différent pour chaque DIV, dans l'exemple ci-dessous, cela ouvrira une nouvelle page (je sais ce n'est pas le meilleur des exemples)

Dans mon fichier robot.js, j'ai :

Code :

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

1
2
3
4
5
6
7
8
9
$(function() {
    $("#robotDanse").on("click", function() {
        $.ajax({
            type: "GET",
            url: "/src/php/action.php",
            data: 'action=macarena'
        });
    });
});

Dans mon fichier action.php, j'ai :

Code PHP :

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

1
2
3
4
5
6
7
<?php
if(isset($_GET['action'])){
       switch ($_GET['action']){
             case "macarena":
             header('Location: /robot/macarena');
       }
}

Mais lorsque je clique sur la DIV, il ne se passe rien. Le script php ne semble pas se lancer. Pouvez-vous m'aider svp ?

Invité · 23/02/2019, 21h44

Bonjour,

as-tu bien le script d'initialisation de la bibliothèque jQuery ?

**laguernette** · 23/02/2019, 21h49

Je pense. J'ai ajouté cette balise à la fin ma balise <body> :

Code :

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

1
2
3
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>

C'est bien cela ?

Invité · 23/02/2019, 22h01

Oui.

Mais ton script doit être APRÈS.

**laguernette** · 23/02/2019, 22h08

C'est le cas, juste après ce script, j'ai ajouté la balise suivante :

Code :

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

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

Par contre, je viens de voir en utilisant les outils développeur de chrome, que j'avais une erreur :
Uncaught TypeError: $.ajax is not a function

Invité · 23/02/2019, 22h20

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
<div id="robotDanse">cliquer ici</div>
 
<!-- Script initialisation jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
<script>
$(function() {
    $("#robotDanse").on("click", function() {
        $.ajax({
            type: "GET",
            url: "/src/php/action.php", // bien vérifier le chemin
            data: 'action=macarena'
        })
        .done(function( retour ) {
		alert( retour );
        })
        .fail(function() {
		alert( "error" );
        });
    });
});
</script>

Puisque tu dis avoir plusieurs <div>, il est possible d'utiliser les attributs data-* :

Exemple :

Code HTML :

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

1
2
3
<div class="robotDanse" data-danse="macarena">cliquer danse 1</div>
<div class="robotDanse" data-danse="lambada">cliquer danse 2</div>
<div class="robotDanse" data-danse="samba">cliquer danse 3</div>

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
$(function() {
    $(".robotDanse").on("click", function() {
        var danse = $(this).data('danse');
        $.ajax({
            type: "GET",
            url: "/src/php/action.php", // bien vérifier le chemin
            data: 'action='+danse
        })
        .done(function( retour ) {
		alert( retour );
        })
        .fail(function() {
		alert( "error" );
        });
    });
});

Lancer un script php avec AJAX [AJAX]

jQuery

Vue hybride

Discussions similaires

Partager

Partager