Partage
  • Partager sur Facebook
  • Partager sur Twitter

Serialize Jquery

+Calcul Php

Sujet résolu
21 août 2011 à 20:55:16

Hello,

J'essaie de faire en jquery + php une calculette interactive, mon client rentre des données et le calcul se fait automatiquement en fonction des données saisies pour ressortir un résultat.

Vu le nombre de calcul et de champs possible (devis en ligne multi-produits), j'ai découvert serialize qui me parait adapté

Je conçois le concept de la récup des données, du traitement en php mais comment renvoyer mes données à jquery après traitement ?
$("#submit-form").submit(
function(){
var data = $(this).serialize();
$.post( "action.php", {
action: "ajax_verify_form",
data: data },
function(response){
alert(response);
return false;
}
);
return false;
}
);


<?php
$fields = explode("&",$data);
foreach($fields as $field){
$field_key_value = explode("=",$field);
$key = urldecode($field_key_value[0]);
$value = urldecode($field_key_value[1]);
//Ici divers calculs php 

$resultat = $value * 1000  //exemple bidon
}
?>


C'est au niveau du retour du calcul que je sèche, comment renvoyer à Jquery le résultat ($resultat) pour les afficher dans la page html ?

Merci,
  • Partager sur Facebook
  • Partager sur Twitter
22 août 2011 à 4:54:57

Le résultat d'une requête Ajax est simplement ce que la page affiche.
Tu peux donc à la fin de ton script faire :

echo $resultat;


Tu obtiendras le résultat en réponse sous jQuery.
  • Partager sur Facebook
  • Partager sur Twitter
Besoin de SEO ou développement web pas cher? Contacte MJA Web Services.
22 août 2011 à 8:35:15

Hello,

Merci de ta réponse, en effet j'avais compris que je pouvais utiliser echo mais ce que je veux c'est afficher le résultat dans un élément du formulaire via Jquery :



<form id="formulaire_calcul" action="calcul.php" method="post">
		<fieldset>
			<legend>Formulaire de calcul</legend>
			<label for="nombre_a">Nombre A : </label>
			<input id="nombre_a" type="text" name="nombre_a" />
			<br />
			<label for="nombre_b">Nombre B : </label>
			<input id="nombre_b" type="text" name="nombre_b" />
			<br />
			<input type="submit" value="Calculer !" />
		</fieldset>
	</form>
		<input id="resultat" type="text" />


En gros une fois le calcul a+b par exemple effectué par php l'afficher dans résultat

$("input#resultat").val($resultat);


Je pense que c'est possible non ? ou ma méthode Jquery n'est pas la bonne choisie ?

Cdt,
  • Partager sur Facebook
  • Partager sur Twitter
22 août 2011 à 8:43:49

Lis la doc de la fonction $post et regarde quel usage tu dois faire de data.
Et réfléchi un peu : si $resultat est une variable PHP, ça n'a aucun sens de faire un val($resultat); en JS. Essaie d'adapter ce qu'on te dit à ton code.
  • Partager sur Facebook
  • Partager sur Twitter
22 août 2011 à 10:23:59

Dans ton php, tu fais "echo $resultat". Donc le contenu de $resultat sera affiché sur la page.

Ensuite, regardes la doc de jquery : http://api.jquery.com/jQuery.post/

On y voit 3 arguments : url, data, callBack
Le callback à comme premier argument data, qui correspond à ce qu'a envoyé le serveur (cette variable va donc contenir ce que contenait $resultat

Il ne reste qu'a faire :
$.post(
    "action.php",
    { action: "ajax_verify_form", data: $(this).serialize() },
    function(data) {
        $("#result").html(data); // Met la réponse du serveur dans l'émément qui a pour id "result"
    }
);
  • Partager sur Facebook
  • Partager sur Twitter
22 août 2011 à 17:21:13

Hello,

Alors disons que mon data est un array (print_r($resultat) sur la page php),

M'est t'il possible d'accéder aux éléments par leur clé dans data sur la fonction(data) de jquery voir ci-dessous ? si oui quel est la marche à suivre ?

$.post(
    "action.php",
    { action: "ajax_verify_form", data: $(this).serialize() },
    function(data) {
        $("#result").html(data['0']); // Met la réponse du serveur dans l'émément qui a pour id "result" 
    }
);


Merci
  • Partager sur Facebook
  • Partager sur Twitter
22 août 2011 à 18:15:27

Ce que tu récupères n'est que du *texte*. Ce n'est pas un array, ce n'est pas du Javascript.
Il faut bien comprendre ça quand tu fais de l'AJAX : quelque soit la réponse du serveur (texte, JSON, XML, etc.), il faut parser ce résultat pour pouvoir t'en servir. Il n'y a guère que le HTML qui se parse tout seul quand tu l'injectes dans ta page, parce que le DOM est dynamique.

Ce que tu peux faire c'est, en PHP, former une liste serialisée (pas un print_r) - par exemple : séparée par des virgules - et utiliser la fonction split en JS pour créer un array à partir de cette chaîne.
  • Partager sur Facebook
  • Partager sur Twitter
23 août 2011 à 0:29:32

Dans ce cas, je te conseil de combiner cela avec JSON.

Avec PHP, tu encodes ton array en JSON grace à http://php.net/manual/fr/function.json-encode.php

Avec JS, tu le dé-encode grace à http://api.jquery.com/jQuery.parseJSON/
  • Partager sur Facebook
  • Partager sur Twitter
23 août 2011 à 17:22:33

Merci c'est exactement ce que je cherchais :

Dans la page PHP je construit mes résultats dans un array :

<?php print(json_encode($resultat)); ?>


Et dans le success du JQUERY :

function(data){
    var json = $.parseJSON(data);
    $('input#resultat').val(json.test);


Merci bcp
  • Partager sur Facebook
  • Partager sur Twitter