Jak przekazać parametry w $ ajax POST?

Postępowałem zgodnie z samouczkiem, jak podano w tym linku. W poniższym kodzie z jakiegoś powodu dane nie są dołączane do adresu URL jako parametry, ale jeśli ustawię je bezpośrednio na adres URL, /?field1="hello"to działa.

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

Polecam do skorzystania z $.postlub $.getskładni jQuery dla prostych przypadkach:

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

Jeśli chcesz wychwycić przypadki niepowodzeń, po prostu zrób to:

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

Dodatkowo, jeśli zawsze wysyłasz ciąg JSON, możesz użyć $ .getJSON lub $ .post z jeszcze jednym parametrem na samym końcu.

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

Spróbuj użyć metody GET,

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

Nie możesz zobaczyć parametrów w adresie URL z metodą POST.

Edytować:

Uwaga dotycząca wycofania : wywołania zwrotne jqXHR.success (), jqXHR.error () i jqXHR.complete () są usuwane od wersji jQuery 3.0. Możesz zamiast tego użyć jqXHR.done (), jqXHR.fail () i jqXHR.always ().

Jquery.ajax nie koduje danych POST automatycznie, tak jak w przypadku danych GET. Jquery oczekuje, że Twoje dane zostaną wstępnie sformatowane, aby dołączyć do treści żądania, aby zostały wysłane bezpośrednio przez sieć.

Rozwiązaniem jest użycie funkcji jQuery.param do zbudowania ciągu zapytania, którego oczekuje większość skryptów przetwarzających żądania POST.

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

W tym przypadku parammetoda formatuje dane w celu:

field1=hello&field2=hello2

Dokumentacja Jquery.ajax mówi, że istnieje flaga o nazwie, processDataktóra kontroluje, czy to kodowanie jest wykonywane automatycznie, czy nie. Dokumentacja mówi, że jest to ustawienie domyślne true, ale nie jest to zachowanie, które obserwuję, gdy POSTjest używane.

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

W żądaniu POST parametry są wysyłane w treści żądania, dlatego nie widać ich w adresie URL.

Jeśli chcesz je zobaczyć, zmień

    type: 'POST',

do

    type: 'GET',

Zwróć uwagę, że przeglądarki mają narzędzia programistyczne, które pozwalają zobaczyć pełne żądania wysyłane przez Twój kod. W przeglądarce Chrome znajduje się w panelu „Sieć”.

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

type: 'POST', doda ** parametry do treści żądania **, które nie jest widoczne w adresie URL, natomiast type: 'GET'dołączy parametry do adresu URL, który jest widoczny .

Większość popularnych przeglądarek internetowych zawiera panele sieciowe, które wyświetlają całe zapytanie .

W panelu sieci wybierz XHR, aby zobaczyć żądania .

Można to również zrobić za pomocą tego.

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

Możesz to zrobić za pomocą $ .ajax lub $ .post

Używając $ .ajax:

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

Korzystanie z $ .post:

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

Twój kod był poprawny, ale nie przekazujesz kluczy JSON jako ciągów.

Powinien zawierać podwójne lub pojedyncze cudzysłowy

{"field1": "hello", "field2": "hello2"}

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

Aby wysłać parametry w adresie URL w POSTmetodzie, możesz po prostu dołączyć je do adresu URL w następujący sposób:

$.ajax({
    type: 'POST',
    url: 'superman?' + jQuery.param({ f1: "hello1", f2 : "hello2"}),
    // ...
});