jQuery: formulaire serialize () et autres paramètres


115

Est-il possible d'envoyer des éléments de formulaire (sérialisés avec .serialize()méthode) et d'autres paramètres avec une seule requête AJAX?

Exemple:

$.ajax({
    type : 'POST',
    url : 'url',
    data : {
        $('#form').serialize(),
        par1 : 1,
        par2 : '2',
        par3: 232
    }
}

Sinon, quelle est la meilleure façon de soumettre un formulaire avec d'autres paramètres?

Merci

Réponses:


236

serialize() transforme efficacement les valeurs du formulaire en une chaîne de requête valide, en tant que telle, vous pouvez simplement ajouter à la chaîne:

$.ajax({
    type : 'POST',
    url : 'url',
    data : $('#form').serialize() + "&par1=1&par2=2&par3=232"
}

7
@Falcon Que voulez-vous dire de la noix de coco ici?
Shafizadeh

comment puis-je changer 1 en variable
Slatan-ko

3
@Shafizadeh Its a ryme (beaucoup - noix de coco)
Adam

Pouvez-vous s'il vous plaît dire pourquoi ici pas besoin de contentType ?? Est-ce ajouté par défaut?
kernal lora le

Oui, l'URL du formulaire encodée est la valeur par défaut. Voir la documentation jquery pour plus d'informations
Rory McCrossan

77

Vous pouvez également utiliser form.serialize()avec $.param(object)si vous stockez vos paramètres dans une variable objet. L'utilisation serait:

var data = form.serialize() + '&' + $.param(object)

Voir http://api.jquery.com/jQuery.param pour plus d'informations.


10
J'aime celui la. Cela signifie que je n'ai pas à regarder une chaîne de requête laide!
Greg Woods

4
C'est de loin le meilleur moyen. La réponse acceptée est compliquée et ne doit jamais être utilisée dans aucune application de production.
FastTrack

3
Si nous parlons d'un environnement de production, aucune de ces réponses ne doit être utilisée. Le formdoit contenir toutes les informations (dans des champs masqués si nécessaire) afin qu'il puisse être sérialisé en un seul appel. De cette façon, si JS est désactivé ou échoue, la soumission du formulaire doit toujours avoir une sécurité intégrée et inclure toutes les données lors de l'envoi.
Rory McCrossan

9

Je ne sais pas mais rien de ce qui précède n'a fonctionné pour moi, puis j'ai utilisé ceci et cela a fonctionné:

Dans le tableau sérialisé du formulaire, il est stocké sous forme de paire clé / valeur

Nous avons poussé la ou les nouvelles valeurs ici sous forme de variable, puis nous pouvons maintenant passer cette variable directement.

var form = $('form.sigPad').serializeArray();
var uniquekey = {
      name: "uniquekey",
      value: $('#UniqueKey').val()
};
form.push(uniquekey);

1

Si vous souhaitez envoyer des données avec la sérialisation du formulaire, vous pouvez essayer ceci

var form= $("#formId");
$.ajax({
    type: form.attr('method'),
    url: form.attr('action'),
    data: form.serialize()+"&variable="+otherData,
    success: function (data) {
    var result=data;
    $('#result').attr("value",result);

    }
});

0

passer la valeur du paramètre comme ceci

data : $('#form_id').serialize() + "&parameter1=value1&parameter2=value2"

etc.


0

Suite à la réponse de Rory McCrossan , si vous voulez envoyer un tableau d'entiers (presque pour .NET), voici le code:

// ...

url: "MyUrl",       //  For example --> @Url.Action("Method", "Controller")
method: "post",
traditional: true,  
data: 
    $('#myForm').serialize() +
    "&param1="xxx" +
    "&param2="33" +
    "&" + $.param({ paramArray: ["1","2","3"]}, true)
,             

// ...

-1

Vous pouvez créer un formulaire auxiliaire en utilisant jQuery avec le contenu d'un autre formulaire, puis ajouter ce formulaire à d'autres paramètres afin que vous n'ayez qu'à le sérialiser dans l'appel ajax.

function createInput(name,value){
    return $('<input>').attr({
        name: name,
        value: value
    });
}
$form = $("<form></form>");
$form.append($("#your_form input").clone());
$form.append(createInput('input_name', 'input_value'));
$form.append(createInput('input_name_2', 'input_value_2'));
....

$.ajax({
    type : 'POST',
    url : 'url',
    data : $form.serialize()
}

-1

Je corrige le problème avec sous instruction; envoyer des données avec l'URL même méthode GET

$.ajax({
    url: 'includes/get_ajax_function.php?value=jack&id='+id,
    type: 'post',
    data: $('#b-info1').serializeArray(),

et obtenez de la valeur avec $_REQUEST['value']OU$_GET['id']


En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.