webentwicklung-frage-antwort-db.com.de

Wie übergebe ich Parameter in $ ajax POST?

Ich habe das Tutorial wie in this link angegeben befolgt. Im folgenden Code werden die Daten aus irgendeinem Grund nicht als Parameter an die URL angehängt, aber wenn ich sie mit /?field1="hello" direkt auf die URL setze, funktioniert das.

$.ajax({
        url: 'superman',
        type: 'POST',
        data: { field1: "hello", field2 : "hello2"} ,
        contentType: 'application/json; charset=utf-8',
        success: function (response) {
            alert(response.status);
        },
        error: function () {
            alert("error");
        }
    });
jqueryajax
129
user4127

Ich würde Ihnen empfehlen, für einfache Fälle die Syntax $.post oder $.get von jQuery zu verwenden:

_$.post('superman', { field1: "hello", field2 : "hello2"}, 
    function(returnedData){
         console.log(returnedData);
});
_

Wenn Sie die Fehlerfälle abfangen müssen, gehen Sie wie folgt vor:

_$.post('superman', { field1: "hello", field2 : "hello2"}, 
    function(returnedData){
         console.log(returnedData);
}).fail(function(){
      console.log("error");
});
_

Wenn Sie immer eine JSON-Zeichenfolge senden, können Sie außerdem $. GetJSON oder $ .post mit einem weiteren Parameter ganz am Ende verwenden.

_$.post('superman', { field1: "hello", field2 : "hello2"}, 
     function(returnedData){
        console.log(returnedData);
}, 'json');
_
116
Alvaro

Versuchen Sie es mit der GET-Methode,

var request = $.ajax({
    url: 'url',
    type: 'GET',
    data: { field1: "hello", field2 : "hello2"} ,
    contentType: 'application/json; charset=utf-8'
});

request.done(function(data) {
      // your success code here
});

request.fail(function(jqXHR, textStatus) {
      // your failure code here
});

Sie können keine Parameter in URL mit der Methode POST sehen.

Bearbeiten:

Hinweis auf Verfall: Die Rückrufe jqXHR.success (), jqXHR.error () und jqXHR.complete () wurden ab jQuery 3.0 entfernt. Sie können stattdessen auch jqXHR.done (), jqXHR.fail () und jqXHR.always () verwenden.

58
Ajith S

Jquery.ajax verschlüsselt POST Daten für Sie nicht automatisch wie für GET-Daten. Jquery erwartet, dass Ihre Daten so vorformatiert sind, dass sie an den Anforderungshauptteil angehängt werden, der direkt über die Leitung gesendet wird.

Eine Lösung besteht darin, die Funktion jQuery.param zu verwenden, um eine Abfragezeichenfolge zu erstellen, die von den meisten Skripten, die POST -Anforderungen verarbeiten, erwartet wird.

$.ajax({
    url: 'superman',
    type: 'POST',
    data: jQuery.param({ field1: "hello", field2 : "hello2"}) ,
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
    success: function (response) {
        alert(response.status);
    },
    error: function () {
        alert("error");
    }
});

In diesem Fall formatiert die Methode param die Daten wie folgt:

field1=hello&field2=hello2

Die Dokumentation Jquery.ajax besagt, dass es ein Flag mit dem Namen processData gibt, das steuert, ob diese Codierung automatisch erfolgt oder nicht. Die Dokumentation besagt, dass der Standardwert true ist, aber das ist nicht das Verhalten, das ich beobachte, wenn POST verwendet wird.

45
Stephen Ostermiller
    function FillData() {
    var param = $("#<%= TextBox1.ClientID %>").val();
    $("#tbDetails").append("<img src='Images/loading.gif'/>");
    $.ajax({
        type: "POST",/*method type*/
        contentType: "application/json; charset=utf-8",
        url: "Default.aspx/BindDatatable",/*Target function that will be return result*/
        data: '{"data":"' + param + '"}',/*parameter pass data is parameter name param is value */
        dataType: "json",
        success: function(data) {
               alert("Success");
            }
        },
        error: function(result) {
            alert("Error");
        }
    });   
}
14
SiwachGaurav

In einer POST-Anforderung werden die Parameter im Hauptteil der Anforderung gesendet. Deshalb werden sie in der URL nicht angezeigt.

Wenn Sie sie sehen möchten, ändern Sie

    type: 'POST',

zu

    type: 'GET',

Beachten Sie, dass Browser über Entwicklungstools verfügen, mit denen Sie die vollständigen Anforderungen anzeigen können, die Ihr Code ausgibt. In Chrome befindet es sich im Bereich "Netzwerk".

11
Denys Séguret
$.ajax(
   {
      type: 'post',
      url: 'superman',
      data: { 
        "field1": "hello",
        "field2": "hello1"
      },
      success: function (response) {
        alert("Success !!");
      },
      error: function () {
        alert("Error !!");
      }
   }
);

type: 'POST', hängt ** parameter an an den Hauptteil der Anforderung ** an, der nicht gesehen in der URL while ist type: 'GET' hängt Parameter an die URL an, die sichtbar ist.

Die meisten gängigen Webbrowser enthalten Netzwerkfenster, in denen vollständige Anforderung angezeigt wird.

Wählen Sie im Netzwerkfenster XHR, um Anforderungen anzuzeigen.

Dies kann auch über diese erfolgen.

$.post('superman',
      { 
        'field1': 'hello', 
        'field2': 'hello1'
      },
      function (response) {
        alert("Success !");
      }
    );
6
Dulith De Costa

Sie können dies mit $ .ajax oder $ .post tun

Verwenden von $ .ajax:

    $.ajax({
      type: 'post',
      url: 'superman',
      data: { 
        'field1': 'hello', 
        'field2': 'hello1'
      },
      success: function (response) {
        alert(response.status);
      },
      error: function () {
        alert("error");
      }
   });

Verwendung von $ .post:

    $.post('superman',
      { 
        'field1': 'hello', 
        'field2': 'hello1'
      },
      function (response, status) {
        alert(response.status);
      }
    );
6
Shrinivas

Ihr Code stimmte, außer dass Sie die JSON-Schlüssel nicht als Zeichenfolgen übergeben.

Es sollte doppelte oder einfache Anführungszeichen enthalten

{"field1": "hallo", "field2": "hallo2"}

$.ajax(
   {
      type: 'post',
      url: 'superman',
      data: { 
        "field1": "hello", // Quotes were missing
        "field2": "hello1" // Here also
      },
      success: function (response) {
        alert(response);
      },
      error: function () {
        alert("error");
      }
   }
);
3
Sylvester Das