Ajax Envoyer des informations à php

Version imprimable

Bonjour,

J'ai créer ( a partir de ce tutoriel : http://www.finalclap.com/tuto/cours-jquery-61/ ) ces codes :

Multi.php :

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
59
60
61
62
63
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Tous les calculs !</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<meta http-equiv="language" content="fr">
<meta name="description" content="Sur cette page, vous pourrez calculer beaucoup de choses différentes.">
<meta name="keywords" lang="fr" content="calculatrice, calculatrices, convertisseurs, convertisseur, gratuit, gratuite, gratuits, gratuites, rapide, rapides, simple, simples, calculettes, calculette, calculateur, calculateurs, calculator, online, calculs, calcule, calculer, pratique, pratiques, en ligne">
<link rel="stylesheet" media="screen" type="text/css" title="Design espace" href="../style.css" />
<link rel="shortcut icon" href="../calculatrice.ico"/>
</head>
 
<body>
 <br/><br/><br/><br/><br/><br/><br/>
<a href="" id="lien_addition">Addition</a>
 
 
<script type="text/javascript">
 
jQuery(document).ready(function($){
                
                $('#lien_addition').click(function(e){
                e.preventDefault();   // On désactive le lien
                
        if(document.getElementById('div_addition')){} else {
                
                var new_element = jQuery('<div id="div_addition" style="width:200px; height:200px; padding:5px; background-color:#0096E1; position:absolute; top:150px; left:300px; border: 10px solid #1800F3"><div class="description"><form id="formulaire_addition" autocomplete="off">Addition :<br/><br/><input type="text" name="addi1" style="text-align: center;" id="addi1"/><br/> + <br/><input type="text" name="addi2" style="text-align: center;" id="addi1"/><br/><input type="submit" value="calculer" id="valider_addition"/></form><div id="retour"><i>vide</i></div></div></div>'
                
                );
                $('body').append(new_element);
                $(function(){$('#div_addition').draggable().resizable();});
                        
        }               
        });
        
        
//      if(document.getElementById('div_addition')){} else {
        $('#formulaire_addition').submit(function(e){
        // On désactive le comportement par défaut du navigateur
        // (qui consiste à appeler la page action du formulaire)
        e.preventDefault();
         
        // On envoi la requête AJAX
        $.getJSON(
            'multi/addition.php',
            {addi1: $('#addi1').val()},
                        {addi2: $('#addi2').val()},
            function(data){
                        $('#retour').hide();
            $('#retour').html('')
                    .append(data.addi1+' + '+data.addi2+' = '+data.resultat);
                        $('#retour').fadeIn();
            }
        );
    });
//}
});
</script>
 
</body>
</html>

Et le code php :

addition.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
 
$addi1 = '';
if( isset($_GET['addi1']) ){
    $addi1 = $_GET['addi1'];
}
 
$addi2 = '';
if( isset($_GET['addi2']) ){
    $addi2 = $_GET['addi2'];
}
 
$retour = array(
    'addi1' => $addi1,
	'addi2' => $addi2,
	'resultat' => $addi1+$addi2,
);
 
// Envoi du retour (on renvoi le tableau $retour encodé en JSON)
header('Content-type: application/json');
echo json_encode($retour);
?>

Voici mon problème :

( la page de départ est la page multi.php
Lorsque l'on clique sur "addition", une fenêtre s'ouvre, avec deux champs de textes. Quand on remplit ces deux champs de textes, et que l'on valide, la page se recharge avec comme paramètre les valeurs saisi, alors que, dans le tutoriel, la page ne s'actualise pas, elle envoie les informations au fichier php ( avec ajax ), le fichier php renvoie les informations ( après les avoir traitées ) au fichier multi.php

Pouvez-vous me dire quelle est le problème ? ( pourquoi ça ne marche pas )

Merci d'avance,

Cordialement

PS : Désolé si le message n'est pas posté dans la bonne catégorie, je n'ai pas l'habitude du forum, je viens seulement de m'inscrire...

Bonjour,
on va commencer par la version jQuery que tu utilises, elle est largement obsolète, je t'engage fortement à en utiliser une plus récente.

Citation:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Ton problème provient du fait que tu affectes un événement alors que l'élément n'existe pas encore dans la page, lorsque celui ci est crée aucun événement ne lui est donc accroché.

Tu as plusieurs façons de réglé ce problème

- créer l'élément et le mettre dans une DIV en display:none, donc invisible, et rendre celle ci visible, display:block, sur le clic de ton lien, de la sorte ta FORM sera effectivement active et son événement opérationnel.

- déplacer le code affectant l'événement à la suite de la création de la FORM, dans la condition d'existance, pas top entre nous !!!
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 if (document.getElementById('div_addition')) {} else { var new_element = jQuery( '<div id="div_addition" style="width:200px; height:200px; padding:5px; background-color:#0096E1; position:absolute; top:150px; left:300px; border: 10px solid #1800F3"><div class="description"><form id="formulaire_addition" autocomplete="off">Addition :<br/><br/><input type="text" name="addi1" style="text-align: center;" id="addi1"/><br/> + <br/><input type="text" name="addi2" style="text-align: center;" id="addi1"/><br/><input type="submit" value="calculer" id="valider_addition"/></form><div id="retour"><i>vide</i></div></div></div>' ); $('body').append(new_element); $(function () { $('#div_addition').draggable().resizable(); }); $('#formulaire_addition').submit( function (e) { // On désactive le comportement par défaut du navigateur // (qui consiste à appeler la page action du formulaire) e.preventDefault(); // On envoi la requête AJAX $.getJSON( 'multi/addition.php', { addi1: $('#addi1').val(), addi2: $('#addi2').val() }, function (data) { $('#retour').hide(); $('#retour').html('') .append(data.addi1 + ' + ' + data.addi2 + ' = ' + data.resultat); $('#retour').fadeIn(); } ); }); }
- utiliser la délégation d'événements, non reconnu par la version que tu utilises, cette façon de faire est la lus élégante.
Code:

1 2 3 4 $( "body" ).on( "submit", "#formulaire_addition", function(e) { e.preventDefault(); alert('ICI tu mets ce que tu veux faire avec ta FORM'); });

18/01/2014, 19h11
Adrien88390

Merci !!!

Merci, j'ai choisi la première méthode, ça marche super bien !!!

Encore merci

Au revoir