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" );
        });
    });
});

**laguernette** · 23/02/2019, 23h02

J'ai réussi à supprimer l'erreur, maintenant, dans les rapport, ça m'indique un status code 200 OK pour la redirection de page mais dans la réalité, ça ne redirige toujours pas la page.

J'ai ajouté le code ci-dessous, j'ai bien un message qui s'affiche :

Code :

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

1
2
3
4
 
done(function (retour) {
       alert(retour);
})

**Toufik83** · 24/02/2019, 15h28

Salut,

Pour l'html il est préférable d'utiliser des classes et l'attribut "data-danse" des div

Code html :

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

1
2
3
4
 
<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>

Quand tu mets un slache "/" avant l'url d'ajax, cela veux dire que tu reviens à la racine de ton serveur, bref pour que mon code fonctionne, il faut que l’arborescence de tes fichiers soit comme ça :

-index.html (page qui contient le script ajax)
-src (le dossier src)

-php (sous dossier du dossier src)

-action.php (le fichier action php doit être dans le dossier php)

-robot (le dossier robot)

-macarena (sous dossier du dossier robot)

-index.html (la page par défaut du dossier macarena)

Essaie de mettre la redirection dans .done d'ajax, après que le fichier php envois le chemin comme suite :

Code js :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
$(".robotDanse").on("click", function() {
    $.ajax({
        type: "GET",
        url: "src/php/action.php",
        data: 'action='+$(this).attr('data-danse')
        })
        .done(function( retour ) {
            $(location).attr('href',retour);//redirection ici avec le retour envoyé par le fichier php
        })
        .fail(function(err) {
            alert( "error fail :"+err );
        });
    });

action.php :

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
 
<?php
$chemin;
if(isset($_GET['action'])){
       switch ($_GET['action']){
             case "macarena":
             $chemin='robot/macarena';
             break;
       }
       echo $chemin;
}

Invité · 24/02/2019, 16h05

Bonjour,

Pour le coup,

Code :

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

$(this).attr('data-danse');

s'écrit :

Code :

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

$(this).data('danse');

**Toufik83** · 24/02/2019, 16h10

Ce n'est pas la même chose, regarde ici.

**laguernette** · 26/02/2019, 20h30

J'ai compris que ce que je voulais faire n'était pas possible. Ma redirection ne pourra pas se faire avec le code php. Je l'ai donc faite avec Ajax et ça fonctionne

Merci

**Toufik83** · 27/02/2019, 09h56

Il est possible de le faire en php aussi, sauf qu'il faut utiliser un break et un exit dans le switch.

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
 
switch ($_GET['action']){
             case "macarena":
              header('location: robot/macarena');
              exit;
             break;
            case "autre_action":
             header('location: chemin');
             exit;
             break;
}

Invité · 27/02/2019, 10h03

Bonjour,

1- Si ce sont de simples "redirections" que tu veux, il suffit de mettre des liens <a> classiques !

2- On peut aussi utiliser des formulaires <form>, avec des <button>.
Soit plusieurs :

Code html :

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

1
2
3
4
5
6
7
<form method="get" action="src/php/action.phpmacarena">
   <button type="submit" />macarena</button>
</form>
<form method="get" action="src/php/action.phpsamba">
   <button type="submit" />macarena</samba>
</form>
...

Soit un seul (avec l'attribut formaction) :

Code html :

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

1
2
3
4
5
<form method="get" action="">
   <button type="submit" formaction="src/php/action.php?action=macarena" />macarena</samba>
   <button type="submit" formaction="src/php/action.php?action=samba" />samba</samba>
...
</form>

3- PAR CONTRE, si il s'agit de MODIFIER dynamiquement le CONTENU (d'un <div> ou autre) SUR la page en cours (SANS rechargement), alors c'est bien Ajax qu'il faut.

Bref : il faut d'abord SAVOIR ce que tu veux faire AFIN de définir la technique à employer.

Lancer un script php avec AJAX [AJAX]

jQuery

Discussions similaires

Partager

Partager