php serialize - jquery sérialiser et $.post



array unserialize (7)

Donc, c'est probablement un peu obtus, mais j'ai créé une fonction pour m'aider à faire cela, car j'en avais marre de faire un tas de corrections à chaque fois. serializeArray est en quelque sorte ennuyeux car il fournit une collection d'objets, alors que tout ce que je voulais pour reconstruire PhP était un tableau associatif. La fonction ci-dessous parcourra le tableau sérialisé et créera un nouvel objet avec les propriétés appropriées uniquement lorsqu'une valeur existe.

Tout d'abord, la fonction (il prend l'ID du formulaire en question):

function wrapFormValues(form) { 
    form = "#" + form.attr("id") + " :input";
    form = $(form).serializeArray();
    var dataArray = new Object();

    for( index in form)
    {   
        if(form[index].value)   {
            dataArray[form[index].name] = form[index].value;    
        }
    }       

    return dataArray; 
}

Lors de la construction de mes articles, j'utilise généralement un objet, car je marque généralement deux ou trois autres valeurs avant les données du formulaire et je pense que cela semble plus propre que de le définir en ligne. L'étape finale ressemble à ceci:

var payload = new Object(); 
//stringify requires json2.js from http://www.json.org/js.html
payload.data = JSON.stringify(data);

$.post("page.php", payload,  
    function(reply) {
        //deal with reply.
    });

Côté serveur, tout ce que vous avez à faire est $payload = json_decode($_POST['data'], true) et vous avez vous-même un tableau associatif où les clés sont les noms de vos champs de formulaire.

La clause de non-responsabilité complète, cependant, les sélections multiples ne fonctionneront probablement pas ici, vous n'obtiendrez probablement que la dernière valeur de la liste. Ceci est également créé très spécifiquement pour convenir à un de mes projets, vous pouvez donc le modifier pour vous. Par exemple, j'utilise json pour toutes mes réponses du serveur.

J'essaie d'envoyer beaucoup de données à partir d'un formulaire en utilisant la méthode $ .post dans jQuery. J'ai d'abord utilisé la fonction serialize () pour créer toutes les données de formulaire en une seule chaîne longue que je vais ensuite exploser en serveur. Ce qui est étrange, c'est quand j'essaye de l'envoyer en utilisant $ .post, il ajoute le résultat de la sérialisation () à l'URL comme si je l'envoyais en utilisant GET. Quelqu'un a des idées pourquoi cela se produit?

Voici le jquery:

$("#addShowFormSubmit").click(function(){
  var perfTimes = $("#addShowForm").serialize();
  $.post("includes/add_show.php", {name: $("#showTitle").val(), results: perfTimes }, function(data) {
    $("#addShowSuccess").empty().slideDown("slow").append(data);
  });
});  

voici le php:

$show = $_POST['name'];
$results = $_POST['results'];
$perfs = explode("&", $results);
foreach($perfs as $perf) {
    $perf_key_values = explode("=", $perf);
    $key = urldecode($perf_key_values[0]);
    $values = urldecode($perf_key_values[1]);
}
echo $key, $values;  

essayez d'utiliser serializeArray () au lieu de serialize (). serialize () produira une chaîne de requête encodée en url, alors que serializeArray () produira une structure de données JSON.


Une autre raison possible pour ce problème: si vous avez un formulaire sans action de soumission, chaque fois que vous appuyez sur la touche "ENTRER" pendant que vous remplissez le formulaire, le formulaire sera soumis à l'URL actuelle. voir les données sérialisées apparaissent dans l'URL comme si vous utilisiez une transaction ajax GET. Une solution simple à ce problème, il suffit d'empêcher ENTER de soumettre le formulaire lorsqu'il est pressé:

//Prevent Form Submission when Pressing Enter
$("form").bind("keypress", function(e) {
if (e.keyCode == 13)
    return false;
});

Du côté du php, vous pourriez vouloir regarder parse_str . Il analysera cette chaîne d'URL en variables ou en un tableau si vous utilisez le 2ème paramètre facultatif.


Si vous utilisez un élément <button> pour activer la sérialisation et ajax, et si cet élément <button> est dans l'élément de form , le button agit automatiquement comme une soumission de formulaire, quelle que soit l'attribution .click que vous lui donnez avec jQuery .

type = 'submit'

<button></button> et <button type='submit'></button> sont la même chose. Ils soumettront un formulaire s'ils sont placés dans l'élément <form> .

type = 'button'

<button type='button'></button> est différent. C'est juste un bouton normal et ne soumettra pas le formulaire (sauf si vous le faites volontairement soumettre le formulaire via JavaScript).

Et dans le cas où un élément de formulaire n'a pas d'attribut d'action spécifié, cette soumission envoie simplement les données sur la même page. Vous allez donc voir un rafraîchissement de la page, ainsi que les données sérialisées apparaissant dans l'URL comme si vous utilisiez GET dans votre ajax.

Solutions possibles

1 - Faites le <button> type <button> . Comme expliqué ci-dessus, cela empêchera le bouton de soumettre le formulaire.

Avant:

<form id='myForm'>
    <!--Some inputs, selects, textareas, etc here-->
    <button id='mySubmitButton'>Submit</button>
</form>

Après:

<form id='myForm'>
    <!--Some inputs, selects, textareas, etc here-->
<button type='button' id='mySubmitButton'>Submit</button>
</form>

2 - Déplacez l'élément <button> dehors de l'élément <form> . Cela empêchera le bouton de soumettre le formulaire.

Avant:

<form id='myForm'>
    <!--Some inputs, selects, textareas, etc here-->
    <button id='mySubmitButton'>Submit</button>
</form>

Après:

<form id='myForm'>
    <!--Some inputs, selects, textareas, etc here-->
</form>
<button id='mySubmitButton'>Submit</button>

3 - Ajouter le preventDefault() dans le gestionnaire de clic du bouton pour empêcher la soumission du formulaire (action par défaut):

$("#addShowFormSubmit").click(function(event){
  event.preventDefault();
  var perfTimes = $("#addShowForm").serialize();
  $.post("includes/add_show.php", {name: $("#showTitle").val(), results: perfTimes },      function(data) {
    $("#addShowSuccess").empty().slideDown("slow").append(data);
  });
});

Evidemment, sans voir tout votre code, je ne sais pas si c'est le cas pour votre problème, mais la seule raison pour laquelle j'ai déjà vu un comportement que vous décrivez, c'est que le bouton Envoyer était un <button> sans type spécifié.


Qu'est-ce qui vous amène à croire que les données sont ajoutées à l'URL?

Quoi qu’il en soit, ne serait-il pas plus logique de transmettre les valeurs du formulaire dans les données du formulaire lui-même? Il vous permettra de sauter l'étape "exploser":

$("#addShowFormSubmit")
  .click(function() { 
      var perfTimes = $("#addShowForm").serialize(); 
      $.post("includes/add_show.php", 
         $.param({name: $("#showTitle").val()}) + "&" + perfTimes, 
         function(data) {...}); 
  });

Utilisez POST pour créer et PUT pour mettre à jour. C'est comme ça que Ruby on Rails le fait.

PUT    /items/1      #=> update
POST   /items        #=> create




php jquery serialization post get