Jquery / Ajax Envoier des informations à php

Résolu

88av Messages postés 263 Date d'inscription Statut Membre Dernière intervention -
88av Messages postés 263 Date d'inscription Statut Membre Dernière intervention - 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:

Jquery / Ajax Envoier des informations à php
Reconsidérer le traitement de vos informations à des fins publicitaires - Accueil - Réseaux sociaux
Entrer les informations d'identification reseau - Guide
Easy php - Télécharger - Divers Web & Internet
Appliquez à tous les paragraphes du document à télécharger, à l’exception des titres et des sous-titres, la mise en forme suivante : chaque paragraphe doit être espacé de 0,42 cm ou 12 pt du paragraphe qui suit les textes ne doivent pas être en retrait à droite et à gauche après ces modifications, sur quelle page se trouve le titre « la cheminée » dans le chapitre « informations diverses » ? - Guide
Expert php pinterest - Télécharger - Langages

1 réponse

Réponse 1 / 1

88av Messages postés 263 Date d'inscription Statut Membre Dernière intervention 7

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

probléme avec ajax svp

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

combien d'espace memoire occupe un entier ...

Corriger fautes d'orthographe

Votre réponse

Discussions similaires