Passer plusieurs paramètres à l'appel jQuery ajax

99

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 très bien.

Mais maintenant, j'ai besoin de passer deux paramètres à 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?

ÉDITER:

Les 2 syntaxes suivantes ont fonctionné

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

et

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

où le filtre et les paramètres régionaux sont des variables locales

ChrisCa
la source
9
data: JSON.stringify({ jewellerId: filter, locale: locale })est le meilleur moyen que j'ai trouvé, merci @ChrisCa
Frank Myat jeu
Si vous êtes une âme triste comme moi, vous êtes peut-être resté coincé là-dessus pendant des heures. Lors de l'utilisation JSON.stringifyavec un objet littéral, vous DEVEZ inclure le nom du paramètre avec deux points, le tout entouré d' {}accolades. L'utilisation JSON.stringify(objectLiteral)ne fonctionne pas.
Kaleb Anderson
Signature de méthode comme [WebMethod] [ScriptMethod(UseHttpGet = true)] public static string TestIBAN(string ccc)?
Kiquenet

Réponses:

141

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

METTRE À JOUR:

Comme suggéré par @Alex dans la section des commentaires, un PageMethod ASP.NET s'attend à ce que les paramètres soient encodés en JSON dans la requête, il JSON.stringifydoit donc ê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
});
Darin Dimitrov
la source
12
Pensez également à utiliser JSON.stringify( myObject )pour créer une chaîne JSON à partir d'un objet javascript, au cas où vous souhaiteriez regrouper vos paramètres dans une classe plus tard.
Alex Bagnolini
1
merci pour les réponses - cependant, j'obtiens un statut http 500 quand je l'essaye comme ça. Des idées? ou même comment le déboguer? Le point d'arrêt dans la méthode Web n'est jamais atteint
ChrisCa
1
nouveau code comme suit $ .ajax ({type: 'POST', url: 'popup.aspx / GetJewellerAssets', contentType: 'application / json; charset = utf-8', data: {jewellerId: filter, locale: 'en -US '}, dataType: "json", succès: AjaxSucceeded, erreur: AjaxFailed});
ChrisCa
1
Pour déboguer, regardez d'abord FireBug quelle est la réponse exacte du serveur, puis placez un point d'arrêt dans la méthode du service Web et voyez s'il est atteint.
Darin Dimitrov
1
Le point d'arrêt dans la méthode Web n'est jamais atteint. Firebug affiche: "Message": "Primitive JSON non valide: jewellerId.", "StackTrace": "à System.Web.Script.Serialization Donc, je suppose que la syntaxe du json est incorrecte
ChrisCa
18
data: '{"jewellerId":"' + filter + '","locale":"' + locale + '"}',
David Hedlund
la source
1
cela a fonctionné: '{"jewellerId":' + filter + ', "locale": "en"}', (évidemment, je ne coderai pas en dur la locale en fr, mais c'est la syntaxe qui a fonctionné.
ChrisCa
Cela a fonctionné pour moi avec MVC 3. Je ne pouvais pas obtenir la manière de travailler de Darin - peut-être que c'est un truc MVC 3.
fiat
7

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
                });
pixeline
la source
1
À quoi ressemblerait la signature de la méthode Web dans ce cas pour lire les propriétés datacôté serveur?
Flo
5

N'utilisez pas 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 comme un guillemet simple ou un 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 aucun problème

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


data: JSON.stringify(parameter)

Dans le paramètre ci-dessus se trouve le nom de l'objet javascript et le stringify en le passant à l'attribut data de l'appel ajax.

Sumit Jambhale
la source
3

Quelqu'un d'autre 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: {"key": ("value" | 0 | false)}. De plus, l'écrire sous forme de chaîne nécessite beaucoup moins que de stringifier l'objet ...

Ariel
la source
3
$.ajax({
    type: 'POST',
    url: 'popup.aspx/GetJewellerAssets',      
    data: "jewellerId=" + filter+ "&locale=" +  locale,  
    success: AjaxSucceeded,
    error: AjaxFailed
});
Justinonday
la source
Travailler aussi en utilisant le type: GET ?
Kiquenet
ou vous pouvez utiliser un tableau pour transmettre des données dans jason.stringyfy (array).
Shekhar Patel
1

Juste pour ajouter [Cette ligne fonctionne parfaitement dans Asp.net et trouver des champs de contrôle Web en jason Par exemple: <% Fieldname%>]

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

Tout est question de données que vous transmettez; doit chaîne correctement formatée. Si vous transmettez des données vides, data: {} fonctionnera. Cependant, avec plusieurs paramètres, il doit être correctement formaté, par exemple

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

....

données: dataParam

...

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

Subodh Patil
la source
0

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

data: "{'RecomendeeName':'" + document.getElementById('txtSearch').value + "'," + "'tempdata':'" +"myvalue" + "'}",
user2739266
la source
ne transmettez jamais de données utilisateur à un paramètre sans «nettoyage» avant.
fcm