Comment "soumettre" une partie d'un formulaire en utilisant jQuery

Question

J'ai un formulaire présenté comme une feuille de calcul. Lorsque l'utilisateur quitte une ligne, je souhaite soumettre les champs de cette ligne au serveur à l'aide de jQuery Ajax. La page est une grande forme, donc ce n'est pas vraiment un javascript en cliquant sur le bouton soumettre le scénario - le formulaire est énorme et je veux seulement envoyer une petite partie du contenu pour des raisons de rapidité.

J'ai écrit le code qui identifie la ligne et itère à travers les champs de la ligne. Mon problème est comment construire l'objet dat afin de soumettre quelque chose de compréhensible que je peux désassembler et stocker à la fin du serveur.

Au moment mon code ressemble à ceci

var dat=[]; 
$("#" + finalrow).find("input").each(function() { 
    var o = $(this).attr("name"); 
    var v = $(this).val(); 
    dat.push({ o: v }); 
}); 
$.ajax({ 
    url: 'UpdateRowAjax', 
    dataType: 'json', 
    type: 'POST', 
    data: dat , 
    success: function (data) { 
     renderAjaxResponse(data); 
    } 
}); 

L'assemblage de dat ne fonctionne pas du tout. Alors, comment dois-je construire cet objet de données pour qu'il "ressemble" autant que possible à une soumission de formulaire.

Answer 1

Vous pouvez ajouter les éléments contenant les données que vous souhaitez envoyer à une collection jQuery, puis appeler la méthode serialize sur cet objet. Il renverra une chaîne de paramètres que vous pouvez envoyer au serveur.

paramètre

var params = $("#" + finalrow).find("input").serialize(); 

$.ajax({ 
    url: 'UpdateRowAjax', 
    type: 'POST', 
    data: params , 
    success: function (data) { 
     renderAjaxResponse(data); 
    } 
}); 

Answer 2

$.ajax « data » attend à une carte de paires clé/valeur (ou une chaîne), plutôt que d'un tableau d'objets. Essayez ceci:

var dat = {}; 
$("#" + finalrow).find("input").each(function() { 
    dat[$(this).attr('name')] = $(this).val(); 
}); 

Answer 3

Vous pouvez utiliser $.param() pour sérialiser une liste d'éléments. Par exemple, dans votre code:

var dat= $.param($("input", "#finalrow")); 
$.ajax({ 
    url: 'UpdateRowAjax', 
    dataType: 'json', 
    type: 'POST', 
    data: dat , 
    success: function (data) { 
     renderAjaxResponse(data); 
    } 
}); 

Exemple de .param $(): http://jsfiddle.net/2nsTr/

serialize() cartes à cette fonction, afin d'appeler cette façon devrait être un peu plus efficace.