Jquery / Ajax Envoier des informations à php

Résolu/Fermé

88av Messages postés 263 Date d'inscription dimanche 3 mars 2013 Statut Membre Dernière intervention 17 avril 2015 - 17 janv. 2014 à 21:17
88av Messages postés 263 Date d'inscription dimanche 3 mars 2013 Statut Membre Dernière intervention 17 avril 2015 - 18 janv. 2014 à 20:27

Bonjour,

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

Multi.php :

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

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

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, 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 ?

Merci d'avance,

Cordialement

A voir également:

1 réponse

Réponse 1 / 1

88av Messages postés 263 Date d'inscription dimanche 3 mars 2013 Statut Membre Dernière intervention 17 avril 2015 7
18 janv. 2014 à 20:27

Bonjour,

J'ai trouvé la solution ici :

https://www.developpez.net/forums/d1408696/javascript/bibliotheques-frameworks/jquery/ajax-envoyer-informations-php/

Au revoir

Discussions similaires

Transparence en tete et bas de page

combien d'espace memoire occupe un entier ...

balise de retour à la ligne en php

Tous les paragraphes sont considérés comme des titres

Problème colissimo suivi