web-dev-qa-db-fra.com

Passer plusieurs paramètres à l'appel ajax jQuery

J'ai le code jQuery suivant pour appeler une méthode Web dans une page aspx

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

et voici la signature de la méthode web

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

Cela fonctionne bien.

Mais maintenant, il me faut deux paramètres passés à la méthode web

la nouvelle méthode web ressemble à ceci

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

Comment changer le code client pour appeler avec succès cette nouvelle signature de méthode?

MODIFIER:

Les 2 syntaxes suivantes ont fonctionné

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

et

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

où filtre et locale sont des variables locales

asp.netjqueryajax
96
ChrisCa

N'utilisez pas la concaténation de chaînes pour passer des paramètres, utilisez simplement un hachage de données:

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

MISE À JOUR:

Comme suggéré par @Alex dans la section commentaires, un PageMethod ASP.NET s'attend à ce que les paramètres soient codés JSON dans la demande. Par conséquent, JSON.stringify doit être appliqué sur le hachage de données:

$.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
});
135
Darin Dimitrov
data: '{"jewellerId":"' + filter + '","locale":"' + locale + '"}',
18
David Hedlund

ajoutez simplement autant de propriétés que nécessaire à l'objet de données.

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

Quelqu'un a-t-il remarqué que la chaîne/l'objet JSON n'est pas valide dans toutes les réponses, à l'exception de celle de David Hedlund? :)

Les objets JSON doivent être formatés de la manière suivante: {"clé": ("valeur" | 0 | faux)}. De plus, l'écrire en tant que chaîne nécessite beaucoup moins que de lier l'objet ...

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

NE PAS utiliser la méthode ci-dessous pour envoyer les données en utilisant un appel ajax

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

Si, par erreur, l'utilisateur saisit un caractère spécial, guillemet simple ou guillemet double, l'appel ajax échoue en raison d'une chaîne incorrecte.

Utilisez la méthode ci-dessous pour appeler le service Web sans problème.

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


data: JSON.stringify(parameter)

Dans paramètre ci-dessus, le paramètre est le nom de l'objet javascript et il doit être stratifié lors de son passage à l'attribut data de l'appel ajax.

2
Sumit Jambhale

Il suffit d'ajouter [Cette ligne fonctionne parfaitement dans Asp.net. Trouver des champs de contrôle Web. - Dans jason Par exemple: <% Filename%>]

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

Son tout sur les données que vous transmettez; doit correctement chaîne formatée. Si vous transmettez des données vides, les données: {} fonctionneront. Cependant, avec plusieurs paramètres, il doit être correctement formaté, par exemple.

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

....

data: dataParam

...

La meilleure façon de comprendre est d'avoir un gestionnaire d'erreurs avec le paramètre de message approprié, afin de connaître les erreurs détaillées.

0
Subodh Patil

J'ai passé avec succès plusieurs paramètres en utilisant json

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