Bagaimana cara melewatkan parameter di $ ajax POST?

Saya telah mengikuti tutorial seperti yang dinyatakan dalam tautan ini . Dalam kode di bawah ini untuk beberapa alasan data tidak ditambahkan ke url sebagai parameter, tetapi jika saya mengaturnya langsung ke url menggunakannya /?field1="hello"berfungsi.

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

Saya akan merekomendasikan Anda untuk menggunakan sintaks $.postatau $.getjQuery untuk kasus sederhana:

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

Jika Anda perlu mengetahui kasus kegagalan, lakukan saja ini:

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

Selain itu, jika Anda selalu mengirim string JSON, Anda dapat menggunakan $ .getJSON atau $ .post dengan satu parameter lagi di bagian paling akhir.

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

Coba gunakan metode 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
});

Anda tidak dapat melihat parameter di URL dengan metode POST.

Edit:

Pemberitahuan Penghentian: Callback jqXHR.success (), jqXHR.error (), dan jqXHR.complete () dihapus pada jQuery 3.0. Anda dapat menggunakan jqXHR.done (), jqXHR.fail (), dan jqXHR.always () sebagai gantinya.

Jquery.ajax tidak menyandikan data POST untuk Anda secara otomatis seperti yang dilakukannya untuk data GET. Jquery mengharapkan data Anda diformat sebelumnya untuk ditambahkan ke badan permintaan untuk dikirim langsung melalui kabel.

Solusinya adalah dengan menggunakan fungsi jQuery.param untuk membuat string kueri yang diharapkan oleh sebagian besar skrip yang memproses permintaan 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");
    }
}); 

Dalam hal ini parammetode memformat data menjadi:

field1=hello&field2=hello2

The Jquery.ajax dokumentasi mengatakan bahwa ada bendera yang disebut processDatayang mengontrol apakah pengkodean ini dilakukan secara otomatis atau tidak. Dokumentasi mengatakan bahwa itu default true, tetapi itu bukan perilaku yang saya amati saat POSTdigunakan.

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

Dalam permintaan POST , parameter dikirim dalam isi permintaan, itulah mengapa Anda tidak melihatnya di URL.

Jika Anda ingin melihatnya, ubahlah

    type: 'POST',

untuk

    type: 'GET',

Perhatikan bahwa browser memiliki alat pengembangan yang memungkinkan Anda melihat permintaan lengkap yang dikeluarkan kode Anda. Di Chrome, ada di panel "Jaringan".

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

type: 'POST', akan menambahkan ** parameter ke badan permintaan ** yang tidak terlihat di URL sementara type: 'GET', menambahkan parameter ke URL yang terlihat .

Sebagian besar browser web populer berisi panel jaringan yang menampilkan permintaan lengkap .

Di panel jaringan pilih XHR untuk melihat permintaan .

Ini juga bisa dilakukan melalui ini.

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

Anda dapat melakukannya menggunakan $ .ajax atau $ .post

Menggunakan $ .ajax:

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

Menggunakan $ .post:

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

Kode Anda benar kecuali Anda tidak meneruskan kunci JSON sebagai string.

Ini harus memiliki tanda kutip ganda atau tunggal di sekitarnya

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

Untuk mengirim parameter dalam url dalam POSTmetode Anda cukup menambahkannya ke url seperti ini:

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