Come passare i parametri in $ ajax POST?

Ho seguito il tutorial come indicato in questo link. Nel codice seguente per qualche motivo i dati non vengono aggiunti all'URL come parametri, ma se li imposto direttamente sull'URL usando /?field1="hello"funziona.

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

Ti consiglierei di usare la sintassi $.posto $.getdi jQuery per casi semplici:

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

Se è necessario rilevare i casi non riusciti, basta fare questo:

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

Inoltre, se invii sempre una stringa JSON, puoi utilizzare $ .getJSON o $ .post con un altro parametro alla fine.

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

Prova a utilizzare il metodo 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
});

Non è possibile visualizzare i parametri nell'URL con il metodo POST.

Modificare:

Avviso di deprecazione : i callback jqXHR.success (), jqXHR.error () e jqXHR.complete () vengono rimossi da jQuery 3.0. È invece possibile utilizzare jqXHR.done (), jqXHR.fail () e jqXHR.always ().

Jquery.ajax non codifica i dati POST automaticamente per te come avviene per i dati GET. Jquery prevede che i tuoi dati vengano preformattati per essere aggiunti al corpo della richiesta e inviati direttamente attraverso il filo.

Una soluzione consiste nell'utilizzare la funzione jQuery.param per creare una stringa di query che la maggior parte degli script che elaborano le richieste POST si aspettano.

$.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 questo caso il parammetodo formatta i dati in:

field1=hello&field2=hello2

La documentazione di Jquery.ajax afferma che esiste un flag chiamato processDatache controlla se questa codifica viene eseguita automaticamente o meno. La documentazione afferma che per impostazione predefinita true, ma non è il comportamento che osservo quando POSTviene utilizzato.

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

In una richiesta POST , i parametri vengono inviati nel corpo della richiesta, ecco perché non li vedi nell'URL.

Se vuoi vederli, cambia

    type: 'POST',

per

    type: 'GET',

Tieni presente che i browser dispongono di strumenti di sviluppo che ti consentono di visualizzare le richieste complete che il tuo codice emette. In Chrome, è nel pannello "Rete".

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

type: 'POST', Aggiungerà parametri ** al corpo della richiesta ** che non vede nella URL mentre type: 'GET', aggiunge parametri all'URL che è visibile .

La maggior parte dei browser Web più diffusi contiene pannelli di rete che visualizzano la richiesta completa .

Nel pannello di rete selezionare XHR per visualizzare le richieste .

Questo può essere fatto anche tramite questo.

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

Puoi farlo usando $ .ajax o $ .post

Utilizzando $ .ajax:

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

Utilizzando $ .post:

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

Il tuo codice era corretto, tranne per il fatto che non stai passando le chiavi JSON come stringhe.

Dovrebbe avere virgolette doppie o singole intorno ad esso

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

Per inviare i parametri nell'URL nel POSTmetodo Puoi semplicemente aggiungerlo all'URL in questo modo:

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