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

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

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.


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

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

    }
});

0

passe o valor do parâmetro como este

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

e assim por diante.


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

// ...

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

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


Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.