Obtenir la valeur de tous les éléments de formulaire à joindre pour un appel ajax

Question

J'ai un objet à l'intérieur d'un formulaire.

Sa valeur est affectée à un appel ajax comme celui-ci

var $$ = $(this); 
if (typeof settings.data == 'string') { 
    data = settings.data + '&' + this.name + '=' + $$.val(); 
} else if (typeof settings.data == 'object') { 
data = settings.data; 
    data[this.name] = $$.val(); 
} 

Je veux obtenir le formulaire parent de cet élément, et boucle à travers toutes les entrées et ajouter que trop aux données à utiliser sur un Appel Ajax.

Je souhaite que le nom d'entrée soit la clé du tableau de données.

Probablement quelque chose comme:

var form = $$.parents('form:first'); 

et la prochaine chose à boucle à travers les entrées et attach aux données.

Comment faire cela en utilisant jQuery?

Answer 1

Je pense que vous réinventer la roue ici, il y a déjà une méthode .serialize() spécifiquement pour cela, comme ceci:

var data = $(this).closest("form").serialize(); 

Ou si vous voulez une représentation d'objet que vous pouvez parcourir/ajouter, vous pouvez utilisez .serializeArray() puis manipulez-le avant de le passer en tant qu'option de données. Ce n'est pas clair exactement ce que vous recherchez, mais sonne comme si vous voulez juste passer le formulaire entier comme argument de données à $.ajax() ou a short-hand version, auquel cas .serialize() serait parfait.

Answer 2

Avez-vous vu.use plugin jQuery 'Form'?
http://www.google.com.au/search?q=jquery+form+plugin&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a

Il fera tout le travail pour vous, et fonctionnera même pour uploadas de fichiers (en créant caché iframe à la volée et de le soumettre). Il peut également utiliser le format JSON et/ou XML. Pretty un maniable.

Voir les exemples
http://jquery.malsup.com/form/#tab4

En supposant que le gestionnaire AJAX est st comme cible de forme, il est aussi simple que:

$('#myForm1').ajaxForm(); 

Vous pouvez également remplacer beaucoup d'options ainsi:

// prepare the form when the DOM is ready 
$(document).ready(function() { 
    var options = { 
     target:  '#output1', // target element(s) to be updated with server response 
     beforeSubmit: showRequestFunction, // pre-submit callback 
     success:  showResponseFunction // post-submit callback 

     // other available options: 
     //url:  url   // override for form's 'action' attribute 
     //type:  type  // 'get' or 'post', override for form's 'method' attribute 
     //dataType: null  // 'xml', 'script', or 'json' (expected server response type) 
     //clearForm: true  // clear all form fields after successful submit 
     //resetForm: true  // reset the form after successful submit 

     // $.ajax options can be used here too, for example: 
     //timeout: 3000 
    }; 

    // bind form using 'ajaxForm' 
    $('#myForm1').ajaxForm(options); 
});