jQuery: serialize () formulario y otros parámetros

115

¿Es posible enviar elementos de formulario (serializados con .serialize()método) y otros parámetros con una sola solicitud AJAX?

Ejemplo:

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

Si no es así, ¿cuál es la mejor manera de enviar un formulario junto con otros parámetros?

Gracias

KenavR
fuente

Respuestas:

236

serialize() convierte efectivamente los valores del formulario en una cadena de consulta válida, como tal, simplemente puede agregar a la cadena:

$.ajax({
    type : 'POST',
    url : 'url',
    data : $('#form').serialize() + "&par1=1&par2=2&par3=232"
}
Rory McCrossan
fuente
7
@Falcon ¿Qué quieres decir con coco aquí?
Shafizadeh
¿Cómo puedo cambiar 1 a variable
Slatan-ko
3
@Shafizadeh Es una rima (mucho - coco)
Adam
¿Puede decirnos por qué aquí no es necesario contentType? ¿Eso se agrega por defecto?
kernal lora
Sí, la URL del formulario codificada es la predeterminada. Consulte la documentación de jquery para obtener más información
Rory McCrossan
77

Alternativamente, puede usar form.serialize()con $.param(object)si almacena sus parámetros en alguna variable de objeto. El uso sería:

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

Consulte http://api.jquery.com/jQuery.param para obtener más referencias.

kliszaq
fuente
10
Me gusta este. ¡Significa que no tengo que mirar una cadena de consulta fea!
Greg Woods
4
Esta es la mejor forma, de lejos. La respuesta aceptada es confusa y nunca debe usarse en ninguna aplicación de producción.
FastTrack
3
Si hablamos de un entorno de producción, no se debe utilizar ninguna de estas respuestas. El formcontendrá toda la información (en campos ocultos si es necesario) para que pueda ser serializado en una sola llamada. De esta manera, si JS está deshabilitado o falla, el envío del formulario aún debe tener una seguridad e incluir todos los datos cuando se envíe.
Rory McCrossan
9

No lo sé, pero nada de lo anterior funcionó para mí, luego usé esto y funcionó:

En la matriz serializada del formulario, se almacena como par clave-valor

Presionamos el nuevo valor o valores aquí en la variable de formulario y luego podemos pasar esta variable directamente ahora.

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

Si desea enviar datos con el formulario serializar, puede intentar esto

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);

    }
});
4302836
fuente
0

pasar valor de parámetro como este

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

y así.

Sanjay
fuente
0

Siguiendo la respuesta de Rory McCrossan , si desea enviar una matriz de enteros (casi para .NET), este es el código:

// ...

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)
,             

// ...
Dani
fuente
-1

Puede crear un formulario auxiliar usando jQuery con el contenido de otro formulario y luego agregar ese formulario a otros parámetros para que solo tenga que serializarlo en la llamada 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()
}
Felixuko
fuente
-1

Soluciono el problema con una declaración inferior; enviar datos con url mismo método GET

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

y obtén valor con $_REQUEST['value']OR$_GET['id']

Aziz Fazli
fuente
-1

También puede usar la función serializeArray para hacer lo mismo.

Suresh Prajapat
fuente