Passe vários parâmetros para a chamada jQuery ajax


99

Eu tenho o seguinte código jquery para chamar um webmethod em uma página aspx

$.ajax({
    type: "POST",
    url: "popup.aspx/GetJewellerAssets",
    contentType: "application/json; charset=utf-8",
    data: '{"jewellerId":' + filter + '}',
    dataType: "json",
    success: AjaxSucceeded,
    error: AjaxFailed
});

e aqui está a assinatura do método da web

[WebMethod]
public static string GetJewellerAssets(int jewellerId)
{

Isso funciona bem.

Mas agora preciso que dois parâmetros sejam passados ​​para o método da web

o novo método da web se parece com este

[WebMethod]
public static string GetJewellerAssets(int jewellerId, string locale)
{
}

Como altero o código do cliente para chamar com êxito essa nova assinatura de método?

EDITAR:

As 2 sintaxes a seguir funcionaram

data: '{ "jewellerId":' + filter + ', "locale":"en" }',

e

data: JSON.stringify({ jewellerId: filter, locale: locale }),

onde filtro e local são variáveis ​​locais


9
data: JSON.stringify({ jewellerId: filter, locale: locale })é a melhor maneira que eu encontrei, obrigado @ChrisCa
Frank Myat Qui,

Se você é uma alma triste como eu, pode ter ficado preso nisso por horas. Ao usar JSON.stringifycom um literal de objeto, você DEVE incluir o nome do parâmetro com dois pontos, todos colocados entre {}colchetes. Usar JSON.stringify(objectLiteral)não funciona.
Kaleb Anderson

Assinatura de método como [WebMethod] [ScriptMethod(UseHttpGet = true)] public static string TestIBAN(string ccc)?
Kiquenet

Respostas:


141

Não use concatenação de string para passar parâmetros, apenas use um hash de dados:

$.ajax({
    type: 'POST',
    url: 'popup.aspx/GetJewellerAssets',
    contentType: 'application/json; charset=utf-8',
    data: { jewellerId: filter, locale: 'en-US' },
    dataType: 'json',
    success: AjaxSucceeded,
    error: AjaxFailed
});

ATUALIZAR:

Conforme sugerido por @Alex na seção de comentários, um ASP.NET PageMethod espera que os parâmetros sejam codificados em JSON na solicitação, portanto, JSON.stringifydevem ser aplicados no hash de dados:

$.ajax({
    type: 'POST',
    url: 'popup.aspx/GetJewellerAssets',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify({ jewellerId: filter, locale: 'en-US' }),
    dataType: 'json',
    success: AjaxSucceeded,
    error: AjaxFailed
});

12
Considere também usar JSON.stringify( myObject )para criar uma string JSON a partir de um objeto javascript, caso queira agrupar seus parâmetros em uma classe posteriormente.
Alex Bagnolini

1
obrigado pelas respostas - no entanto, obtenho um status de http 500 quando tento desse jeito. Alguma ideia? ou mesmo como depurá-lo? Ponto de interrupção no método da web nunca é atingido
ChrisCa

1
novo código da seguinte forma $ .ajax ({type: 'POST', url: 'popup.aspx / GetJewellerAssets', contentType: 'application / json; charset = utf-8', data: {jewellerId: filter, locale: 'en -US '}, dataType: "json", sucesso: AjaxSucceeded, erro: AjaxFailed});
ChrisCa

1
Para depurar, primeiro olhe para FireBug qual é a resposta exata do servidor, então coloque um ponto de interrupção no método de serviço da web e veja se ele é alcançado.
Darin Dimitrov

1
O ponto de interrupção no método da web nunca é atingido. O Firebug mostra: "Message": "Primitivo JSON inválido: jewellerId.", "StackTrace": "em System.Web.Script.Serialization Portanto, acho que a sintaxe do json está incorreta
ChrisCa

18
data: '{"jewellerId":"' + filter + '","locale":"' + locale + '"}',

1
funcionou: '{"jewellerId":' + filter + ', "locale": "en"}', (obviamente não vou codificar o local para en, mas esta é a sintaxe que funcionou.
ChrisCa

Isso funcionou para mim com o MVC 3. Não consegui fazer o jeito de Darin funcionar - talvez seja um MVC 3.
fiat

7

simplesmente adicione quantas propriedades forem necessárias ao objeto de dados.

 $.ajax({
                    type: "POST",
                    url: "popup.aspx/GetJewellerAssets",
                    contentType: "application/json; charset=utf-8",
                    data: {jewellerId: filter , foo: "bar", other: "otherValue"},
                    dataType: "json",
                    success: AjaxSucceeded,
                    error: AjaxFailed
                });

1
Qual seria a aparência da assinatura do método da web nesse caso para ler as propriedades no datalado do servidor?
Flo

5

NÃO use o método abaixo para enviar os dados usando uma chamada ajax

data: '{"jewellerId":"' + filter + '","locale":"' + locale + '"}'

Se, por engano, o usuário inserir um caractere especial, como aspas simples ou aspas duplas, a chamada ajax falhará devido à string errada.

Use o método abaixo para chamar o serviço da Web sem qualquer problema

var parameter = {
       jewellerId: filter,
       locale : locale 
};


data: JSON.stringify(parameter)

No parâmetro acima está o nome do objeto javascript e stringify-o ao passá-lo para o atributo data da chamada ajax.


3

Alguém mais notou que o objeto / string json é inválido em todas as respostas, exceto para David Hedlund? :)

Os objetos JSON devem ser formatados da seguinte maneira: {"key": ("value" | 0 | false)}. Além disso, escrevê-lo como uma string requer muito menos do que stringing o objeto ...


3
$.ajax({
    type: 'POST',
    url: 'popup.aspx/GetJewellerAssets',      
    data: "jewellerId=" + filter+ "&locale=" +  locale,  
    success: AjaxSucceeded,
    error: AjaxFailed
});

Trabalhando também usando o tipo: GET ?
Kiquenet

ou você pode usar um array para passar dados em jason.stringyfy (array).
Shekhar Patel de

1

Apenas para adicionar [Esta linha funciona perfeitamente em Asp.net e encontra campos de controle da web em jason Ex .: <% Fieldname%>]

 data: "{LocationName:'" + document.getElementById('<%=txtLocationName.ClientID%>').value + "',AreaID:'" + document.getElementById('<%=DropDownArea.ClientID%>').value + "'}",

1
    var valueOfTextBox=$("#result").val();
    var valueOfSelectedCheckbox=$("#radio:checked").val();

    $.ajax({
    url: 'result.php',
    type: 'POST',
    data: { forValue: valueOfTextBox, check : valueOfSelectedCheckbox } ,
    beforeSend: function() {

          $("#loader").show();
       },
    success: function (response) {
       $("#loader").hide();
       $("#answer").text(response);
    },
    error: function () {
        //$("#loader").show();
        alert("error occured");
    }
    }); 

0

É tudo sobre os dados que você passa; tem uma string formatada corretamente. Se você estiver passando dados vazios, os dados: {} funcionarão. No entanto, com vários parâmetros, ele deve ser formatado corretamente, por exemplo

var dataParam = '{' + '"data1Variable": "' + data1Value+ '", "data2Variable": "' + data2Value+ '"' +  '}';

....

data: dataParam

...

A melhor maneira de entender é ter um manipulador de erros com o parâmetro de mensagem adequado, para saber os erros detalhados.


0

Passei com sucesso vários parâmetros usando json

data: "{'RecomendeeName':'" + document.getElementById('txtSearch').value + "'," + "'tempdata':'" +"myvalue" + "'}",

nunca passe dados do usuário para um parâmetro sem antes 'limpar'.
fcm
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.