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

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"
}

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.


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

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

    }
});

0

pasar valor de parámetro como este

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

y así.


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

// ...

-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()
}

-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']


Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.