jQuery: serialize () form e outros parâmetros

115

É possível enviar elementos de formulário (serializados com .serialize()método) e outros parâmetros com uma única solicitação AJAX?

Exemplo:

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

Se não, qual é a melhor forma de enviar um formulário junto com outros parâmetros?

obrigado

KenavR
fonte

Respostas:

236

serialize() efetivamente transforma os valores do formulário em uma string de consulta válida, como tal, você pode simplesmente anexar à string:

$.ajax({
    type : 'POST',
    url : 'url',
    data : $('#form').serialize() + "&par1=1&par2=2&par3=232"
}
Rory McCrossan
fonte
7
@Falcon O que você quer dizer com coco aqui?
Shafizadeh
como posso mudar 1 para variável
Slatan-ko
3
@Shafizadeh It's a rhyme (alot - coconut)
Adam
Você pode dizer por que aqui não há necessidade de contentType ?? Isso é adicionado por padrão?
kernal lora
Sim, o URL do formulário codificado é o padrão. Veja a documentação do jquery para mais informações
Rory McCrossan
77

Alternativamente, você pode usar form.serialize()com $.param(object)se armazenar seus parâmetros em alguma variável de objeto. O uso seria:

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

Consulte http://api.jquery.com/jQuery.param para obter mais referências.

Kliszaq
fonte
10
Eu gosto deste. Isso significa que eu não preciso olhar para uma string de consulta feia!
Greg Woods,
4
Esta é a melhor maneira, de longe. A resposta aceita é confusa e nunca deve ser usada em nenhum aplicativo de produção.
FastTrack
3
Se estamos falando sobre um ambiente de produção, nenhuma dessas respostas deve ser usada. O formdeve conter todas as informações (em campos ocultos, se necessário) para que possa ser serializado em uma única chamada. Dessa forma, se o JS estiver desabilitado ou falhar, o envio do formulário ainda deve ser à prova de falhas e incluir todos os dados quando enviado.
Rory McCrossan de
9

Eu não sei, mas nenhuma das opções acima funcionou para mim, então eu usei isso e funcionou:

Na matriz serializada do formulário é armazenado como um par de valores-chave

Empurramos o novo valor ou valores aqui na variável de formulário e então podemos passar essa variável diretamente agora.

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

Se você deseja enviar dados com serialização de formulário, você pode tentar isto

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
fonte
0

passe o valor do parâmetro como este

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

e assim por diante.

Sanjay
fonte
0

Seguindo a resposta de Rory McCrossan , se você quiser enviar um array de inteiros (quase para .NET), este é o 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
fonte
-1

Você pode criar um formulário auxiliar usando jQuery com o conteúdo de outro formulário e, em seguida, adicionar thath form outros parâmetros de forma que você só tenha que serializá-lo na chamada 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
fonte
-1

Eu corrijo o problema com under statement; enviar dados com url mesmo método GET

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

e obter valor com $_REQUEST['value']OR$_GET['id']

Aziz Fazli
fonte
-1

Você também pode usar a função serializeArray para fazer o mesmo.

Suresh Prajapat
fonte