Pasar múltiples parámetros a la llamada jQuery ajax

99

Tengo el siguiente código jquery para llamar a un método web en una 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
});

y aquí está la firma del método web

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

Esto funciona bien.

Pero ahora necesito pasar dos parámetros al método web

el nuevo método web se ve así

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

¿Cómo cambio el código del cliente para llamar correctamente a esta nueva firma de método?

EDITAR:

Las siguientes 2 sintaxis funcionaron

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

y

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

donde el filtro y la configuración regional son variables locales

ChrisCa
fuente
9
data: JSON.stringify({ jewellerId: filter, locale: locale })es la mejor manera que he encontrado, Thank @ChrisCa
Frank Myat Jue
Si eres un alma triste como yo, es posible que te hayas atascado en esto durante horas. Cuando se usa JSON.stringifycon un objeto literal, DEBE incluir el nombre del parámetro con dos puntos, todo dentro de {}llaves. Usar JSON.stringify(objectLiteral)no funciona.
Kaleb Anderson
¿Me gusta la firma del método [WebMethod] [ScriptMethod(UseHttpGet = true)] public static string TestIBAN(string ccc)?
Kiquenet

Respuestas:

141

No use la concatenación de cadenas para pasar parámetros, solo use un hash de datos:

$.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
});

ACTUALIZAR:

Como sugirió @Alex en la sección de comentarios, un PageMethod de ASP.NET espera que los parámetros estén codificados en JSON en la solicitud, por lo que JSON.stringifydeben aplicarse en el hash de datos:

$.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
});
Darin Dimitrov
fuente
12
Considere también usar JSON.stringify( myObject )para crear una cadena JSON a partir de un objeto javascript, en caso de que desee agrupar sus parámetros en una clase más adelante.
Alex Bagnolini
1
gracias por las respuestas; sin embargo, obtengo un estado http 500 cuando lo intento así. ¿Algunas ideas? o incluso cómo depurarlo? El punto de interrupción en el método web nunca se alcanza
ChrisCa
1
nuevo código como sigue $ .ajax ({type: 'POST', url: 'popup.aspx / GetJewellerAssets', contentType: 'application / json; charset = utf-8', data: {jewellerId: filter, locale: 'en -US '}, dataType: "json", éxito: AjaxSucceeded, error: AjaxFailed});
ChrisCa
1
Para depurar, primero mire FireBug cuál es la respuesta exacta del servidor, luego coloque un punto de interrupción en el método del servicio web y vea si se alcanza.
Darin Dimitrov
1
El punto de interrupción en el método web nunca se golpea Firebug muestra: "Mensaje": "Primitivo JSON no válido: jewellerId.", "StackTrace": "en System.Web.Script.Serialization Así que supongo que la sintaxis del json es incorrecta
ChrisCa
18
data: '{"jewellerId":"' + filter + '","locale":"' + locale + '"}',
David Hedlund
fuente
1
esto funcionó: '{"jewellerId":' + filter + ', "locale": "en"}', (obviamente no codificaré la configuración regional en en, pero esta es la sintaxis que funcionó.
ChrisCa
Esto funcionó para mí con MVC 3. No pude hacer que Darin funcionara, tal vez sea una cosa de MVC 3.
fiat
7

simplemente agregue tantas propiedades como necesite al objeto de datos.

 $.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
                });
pixeline
fuente
1
¿Cómo se vería la firma del método web en este caso para leer las propiedades en datael lado del servidor?
Flo
5

No utilice el método siguiente para enviar los datos mediante una llamada ajax

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

Si por error el usuario ingresa un carácter especial como comillas simples o comillas dobles, la llamada ajax falla debido a una cadena incorrecta.

Utilice el método siguiente para llamar al servicio web sin ningún problema

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


data: JSON.stringify(parameter)

En el parámetro anterior se encuentra el nombre del objeto javascript y lo codifica al pasarlo al atributo de datos de la llamada ajax.

Sumit Jambhale
fuente
3

¿Alguien más ha notado que la cadena / objeto json no es válido en todas las respuestas excepto en la de David Hedlund? :)

Los objetos JSON deben formatearse de la siguiente manera: {"clave": ("valor" | 0 | falso)}. Además, escribirlo como una cadena requiere mucho menos que encadenar el objeto ...

Ariel
fuente
3
$.ajax({
    type: 'POST',
    url: 'popup.aspx/GetJewellerAssets',      
    data: "jewellerId=" + filter+ "&locale=" +  locale,  
    success: AjaxSucceeded,
    error: AjaxFailed
});
Justinonday
fuente
Trabajando también usando type: GET ?
Kiquenet
o puede usar una matriz para pasar datos en jason.stringyfy (matriz).
Shekhar Patel
1

Solo para agregar [Esta línea funciona perfectamente en Asp.net y encuentra campos de control web en jason Eg: <% Fieldname%>]

 data: "{LocationName:'" + document.getElementById('<%=txtLocationName.ClientID%>').value + "',AreaID:'" + document.getElementById('<%=DropDownArea.ClientID%>').value + "'}",
Milind Bilonia
fuente
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");
    }
    }); 
Jasbir Rana
fuente
0

Se trata de datos que pasas; tiene que una cadena formateada correctamente. Si está pasando datos vacíos, entonces los datos: {} funcionarán. Sin embargo, con varios parámetros, debe formatearse correctamente, por ejemplo

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

....

datos: dataParam

...

La mejor manera de comprenderlo es tener un controlador de errores con el parámetro de mensaje adecuado, para conocer los errores detallados.

Subodh Patil
fuente
0

Pasé con éxito múltiples parámetros usando json

data: "{'RecomendeeName':'" + document.getElementById('txtSearch').value + "'," + "'tempdata':'" +"myvalue" + "'}",
usuario2739266
fuente
nunca pase datos de usuario a un parámetro sin antes "limpiar".
FCM