2010-11-11 3 views
0

Je sais que cela semble que j'aurais dû trouver immédiatement l'exemple qui explique simplement ce concept, et je ne trouve pas le bon. Les exemples dans les didacticiels utilisent flickr comme URL de demande, et je l'obtiens jusqu'à un certain point. J'essaye de manipuler une forme très complexe avec quatre différents seaux d'information sous un plus grand seau d'information. Je pensais que json serait un bon choix. Donc, j'ai trouvé un exemple qui me montre comment sérialiser les données comme ceci:Comment puis-je soumettre ce formulaire en utilisant json sur une autre page et analyser json en PHP ou jQuery?

$.fn.serializeObject = function() 
{ 
    var o = {}; 
    var a = this.serializeArray(); 
    $.each(a, function() { 
     if (o[this.name]) { 
      if (!o[this.name].push) { 
       o[this.name] = [o[this.name]]; 
      } 
      o[this.name].push(this.value || ''); 
     } else { 
      o[this.name] = this.value || ''; 
     } 
    }); 
    return o; 
}; 

Ce qui est génial! Via une alerte, je peux voir la structure json et mes éléments de formulaire. Donc j'ai pensé que le reste serait totalement simple. Et là, je me tape la tête parce que je ne trouve pas un exemple simple de COMMENT ENVOYER ou DEMANDER ces données sérialisées de ma page de traitement qui doit imprimer, organiser et calculer les valeurs de ce qui a été envoyé. Donc, ce que j'ai fait ensuite (et je suis sûr que c'est faux, mais peut-être que cela va illustrer à quel point je suis nouveau et où je dois commencer dans ma compréhension) était d'écrire les données sérialisées dans un champ caché comme ceci:

$('form').submit(function() { 
    var field = '<input type="hidden" name="jsonval" value="' + $.toJSON($('form').serializeObject()) + '">'; 
    // alert($.toJSON($('form').serializeObject())); 

    alert(field); 
    document.write(field); 
    return true; 
}); 

J'utilise la méthode GET sous la forme et quand il apparaît l'alerte, il semble bien, alors il va à la page suivante. Seul ce var caché que j'ai écrit n'est pas là. Le reste des valeurs de formulaire sont. Je veux juste voir le dson json en quelque sorte afin que je puisse alors utiliser json.parse ou tout ce que j'ai à utiliser en PHP pour le décoder.

Voici le code complet:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html lang="en"> 
<head> 
    <title>Attendees</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://jquery-json.googlecode.com/files/jquery.json-1.3.min.js"></script> 
</head> 
<body> 

<form action="receive.php" method="get"> 
    <p><br/> 
    First Name:<input type="text" name="Fname" maxlength="12" size="12"/> <br/> 
    Last Name:<input type="text" name="Lname" maxlength="36" size="12"/> <br/> 
    Preconference:<br/> 
    A:<input type="radio" name="gender" value="A"/><br/> 
    B:<input type="radio" name="gender" value="B"/><br/> 
    What days:<br/> 
    ConfA: 
    <input type="checkbox" name="conf[]" value="ConfA"/><br/> 
    ConfB: 
    <input type="checkbox" name="conf[]" value="ConfB"/><br/> 
    ConfC: 
    <input type="checkbox" name="conf[]" value="ConfC"/> 
    </p> 
    <p><br/> 
    <input name="quote" type="text" value="Enter your meal preference" size="20"> 
    </p> 
    <p><br/> 
    Select a role:<br/> 
    <select name="education"> 
     <option value="decision">Decision Maker</option> 
     <option value="person">Person</option> 
     <option value="fcg">Family</option> 
    </select> 
    </p> 
    <p><br/> 
    Select your educational credits:<br/> 
    <select size="3" name="edu"> 
     <option value="nursing">Nursing</option> 
     <option value="welding">Welding</option> 
     <option value="case">Case Managers</option> 
    </select> 
    </p> 
    <hr> 
     First Name:<input type="text" name="Fname2" maxlength="12" size="12"/> <br/> 
    Last Name:<input type="text" name="Lname2" maxlength="36" size="12"/> <br/> 
    Preconference:<br/> 
    A:<input type="radio" name="gender" value="A2"/><br/> 
    B:<input type="radio" name="gender" value="B2"/><br/> 
    What days:<br/> 
    ConfA: 
    <input type="checkbox" name="conf[]" value="ConfA2"/><br/> 
    ConfB: 
    <input type="checkbox" name="conf[]" value="ConfB2"/><br/> 
    ConfC: 
    <input type="checkbox" name="conf[]" value="ConfC2"/> 
    </p> 
    <p><br/> 
    <input name="quote2" type="text" value="Enter your meal preference" size="20"> 
    </p> 
    <p><br/> 
    Select a role:<br/> 
    <select name="education2"> 
     <option value="decision2">Decision Maker</option> 
     <option value="person2">Person</option> 
     <option value="fcg2">Family</option> 
    </select> 
    </p> 
    <p><br/> 
    Select your educational credits:<br/> 
    <select size="3" name="edu2"> 
     <option value="nursing2">Nursing</option> 
     <option value="weld2">Welding</option> 
     <option value="case2">Case Managers</option> 
    </select> 
    </p> 


<script type="text/javascript"> 

$.fn.serializeObject = function() 
{ 
    var o = {}; 
    var a = this.serializeArray(); 
    $.each(a, function() { 
     if (o[this.name]) { 
      if (!o[this.name].push) { 
       o[this.name] = [o[this.name]]; 
      } 
      o[this.name].push(this.value || ''); 
     } else { 
      o[this.name] = this.value || ''; 
     } 
    }); 
    return o; 
}; 

$('form').submit(function() { 
    var field = '<input type="hidden" name="jsonval" value="' + $.toJSON($('form').serializeObject()) + '">'; 
    // alert($.toJSON($('form').serializeObject())); 

    alert(field); 
    document.write(field); 
    return true; 
}); 

</script> 
<p><input type="submit" /></p> 
</form> 
</body> 
</html> 

Comment puis-je obtenir de communiquer simplement d'une certaine façon avec la page receive.php? Merci d'avoir répondu à une telle question de débutant. J'ai fait des recherches pendant un certain temps, mais je n'arrive pas à savoir si j'ai besoin d'un cadre, ou s'il y a une manière simple et directe ... Il y avait tellement d'exemples différents qui étaient plus complexes que ce problème semblait appeler pour.

Répondre

1

Essayez de mettre l'entrée cachée là pour commencer

<input type="hidden" name="jsonval" id="jsonval" value="" /> 
<!-- also make sure to end your input tags with a "/" --> 

Et puis dans votre javascript le faire ...

var j = $.toJSON($('form').serializeObject()); 

//You might need this if the quotes are making things annoying 
//j = encodeURIComponent(j); 

document.getElementById('jsonval').value = j; 
+0

Je recommande d'utiliser la référence de jQuery ($ '# jsonval') sur getElementById étant donné que jQuery fait un excellent travail en étant compatible avec les navigateurs. Mais à part ça, je suis d'accord avec la pré-création du champ de saisie et le remplissage plus tard. –

+0

Noté. Je ne suis pas un magicien jQuery, personnellement .. encore apprendre la syntaxe et tel ... mais l'idée persiste. – Dutchie432

+0

Cela a fonctionné! Content d'avoir posé la question. Merci pour votre aide sur celui-ci! – Lynn