Übergeben Sie mehrere Parameter an den AjQ-Aufruf von jQuery

99

Ich habe den folgenden Abfragecode, um eine Webmethode in einer Aspx-Seite aufzurufen

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

und hier ist die Signatur der Webmethode

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

Das funktioniert gut.

Aber jetzt muss ich zwei Parameter an die Webmethode übergeben

Die neue Webmethode sieht so aus

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

Wie ändere ich den Clientcode, um diese neue Methodensignatur erfolgreich aufzurufen?

BEARBEITEN:

Die folgenden 2 Syntaxen haben funktioniert

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

und

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

Dabei sind Filter und Gebietsschema lokale Variablen

ChrisCa
quelle
9
data: JSON.stringify({ jewellerId: filter, locale: locale })ist der beste Weg, den ich je gefunden habe. Danke @ChrisCa
Frank Myat Do
Wenn Sie eine traurige Seele wie ich sind, haben Sie vielleicht stundenlang daran festgehalten. Bei Verwendung JSON.stringifymit einem Objektliteral MÜSSEN Sie den Parameternamen in einen Doppelpunkt einfügen, der in {}geschweiften Klammern eingeschlossen ist. Verwenden JSON.stringify(objectLiteral)funktioniert nicht.
Kaleb Anderson
Methodensignatur wie [WebMethod] [ScriptMethod(UseHttpGet = true)] public static string TestIBAN(string ccc)?
Kiquenet

Antworten:

141

Verwenden Sie keine Zeichenfolgenverkettung, um Parameter zu übergeben, sondern verwenden Sie einfach einen Daten-Hash:

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

AKTUALISIEREN:

Wie von @Alex im Kommentarbereich vorgeschlagen, erwartet eine ASP.NET-Seitenmethode, dass Parameter in der Anforderung JSON-codiert werden JSON.stringify sollte daher auf den Daten-Hash angewendet werden:

$.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
quelle
12
Ziehen Sie auch JSON.stringify( myObject )in Betracht , eine JSON-Zeichenfolge aus einem Javascript-Objekt zu erstellen, falls Sie Ihre Parameter später einer Klasse zuordnen möchten.
Alex Bagnolini
1
danke für die Antworten - ich bekomme jedoch einen http-Status 500, wenn ich es so versuche. Irgendwelche Ideen? oder sogar wie man es debuggt? Haltepunkt in der Web-Methode wird nie getroffen
ChrisCa
1
neuer Code wie folgt $ .ajax ({Typ: 'POST', URL: 'popup.aspx / GetJewellerAssets', Inhaltstyp: 'application / json; charset = utf-8', Daten: {Juwelier-ID: Filter, Gebietsschema: 'en -US '}, Datentyp: "json", Erfolg: AjaxSucceeded, Fehler: AjaxFailed});
ChrisCa
1
Schauen Sie sich zum Debuggen zuerst FireBug an, wie genau der Server reagiert, setzen Sie dann einen Haltepunkt in die Webdienstmethode und prüfen Sie, ob er erreicht ist.
Darin Dimitrov
1
Haltepunkt in der Webmethode wird nie getroffen Firebug zeigt: "Message": "Ungültiges JSON-Grundelement: JewellerId.", "StackTrace": "bei System.Web.Script.Serialization Ich denke also, die Syntax des
JSON
18
data: '{"jewellerId":"' + filter + '","locale":"' + locale + '"}',
David Hedlund
quelle
1
Dies funktionierte: '{"jewellerId":' + filter + ', "locale": "en"}' (offensichtlich werde ich das Gebietsschema nicht fest in en codieren, aber dies ist die Syntax, die funktioniert hat.
ChrisCa
Dies funktionierte für mich mit MVC 3. Ich konnte Darins Weg zur Arbeit nicht finden - vielleicht ist es eine MVC 3-Sache.
Fiat
7

Fügen Sie dem Datenobjekt einfach so viele Eigenschaften hinzu, wie Sie benötigen.

 $.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
quelle
1
Wie würde die Signatur der Webmethode in diesem Fall aussehen, um die Eigenschaften dataauf der Serverseite auszulesen ?
Flo
5

Verwenden Sie nicht die folgende Methode, um die Daten mit einem Ajax-Aufruf zu senden

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

Wenn der Benutzer versehentlich ein Sonderzeichen wie ein einfaches oder ein doppeltes Anführungszeichen eingibt, schlägt der Ajax-Aufruf aufgrund einer falschen Zeichenfolge fehl.

Verwenden Sie die folgende Methode, um den Webdienst ohne Probleme aufzurufen

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


data: JSON.stringify(parameter)

Im obigen Parameter ist der Name des Javascript-Objekts angegeben und wird beim Übergeben an das Datenattribut des Ajax-Aufrufs stringifiziert.

Sumit Jambhale
quelle
3

Hat jemand anderes bemerkt, dass der JSON-String / das JSON-Objekt in allen Antworten außer David Hedlunds ungültig ist? :) :)

JSON-Objekte müssen folgendermaßen formatiert werden: {"key": ("value" | 0 | false)}. Außerdem erfordert das Ausschreiben als Zeichenfolge viel weniger als das Zeichenfolgen des Objekts ...

Ariel
quelle
3
$.ajax({
    type: 'POST',
    url: 'popup.aspx/GetJewellerAssets',      
    data: "jewellerId=" + filter+ "&locale=" +  locale,  
    success: AjaxSucceeded,
    error: AjaxFailed
});
Justinonday
quelle
Arbeiten auch mit Typ: GET ?
Kiquenet
oder Sie können ein Array verwenden, um Daten in jason.stringyfy (Array) zu übergeben.
Shekhar Patel
1

Nur zum Hinzufügen [Diese Zeile funktioniert perfekt in Asp.net und findet Websteuerungsfelder in Jason. Beispiel: <% Fieldname%>]

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

Es geht nur um Daten, die Sie übergeben. muss den String richtig formatieren. Wenn Sie leere Daten übergeben, funktionieren data: {}. Bei mehreren Parametern muss es jedoch richtig formatiert werden, z

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

....

Daten: dataParam

...

Der beste Weg, dies zu verstehen, besteht darin, einen Fehlerbehandler mit den richtigen Nachrichtenparametern zu haben, um die detaillierten Fehler zu kennen.

Subodh Patil
quelle
0

Ich habe erfolgreich mehrere Parameter mit json übergeben

data: "{'RecomendeeName':'" + document.getElementById('txtSearch').value + "'," + "'tempdata':'" +"myvalue" + "'}",
user2739266
quelle
Übergeben Sie niemals Benutzerdaten an einen Parameter, ohne ihn zuvor zu reinigen.
fcm