Як передавати параметри в $ ajax POST?

Я дотримувався підручника, як зазначено в цьому посиланні. У наведеному нижче коді чомусь дані не додаються до URL-адреси як параметри, але якщо я встановлюю їх безпосередньо у URL-адресу, використовуючи /?field1="hello"його, це працює.

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

Я б рекомендував вам скористатися $.postабо $.getсинтаксисом JQuery для простих випадків:

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

Якщо вам потрібно зафіксувати випадки невдачі, просто зробіть це:

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

Крім того, якщо ви завжди надсилаєте рядок JSON, ви можете використовувати $ .getJSON або $ .post з ще одним параметром на самому кінці.

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

Спробуйте скористатися методом 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
});

Ви не можете бачити параметри в URL-адресі методом POST.

Редагувати:

Повідомлення про депрекацію : зворотні виклики jqXHR.success (), jqXHR.error () та jqXHR.complete () видаляються з jQuery 3.0. Ви можете використовувати замість jqXHR.done (), jqXHR.fail () та jqXHR.always ().

Jquery.ajax не кодує дані POST для вас автоматично, як це робиться для GET-даних. Jquery очікує, що ваші дані будуть заздалегідь відформатовані для додавання до органу запиту, який буде надісланий безпосередньо по лінії зв'язку

Рішення полягає у використанні функції jQuery.param для створення рядка запиту, якого очікує більшість скриптів, які обробляють запити 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");
    }
}); 

У цьому випадку paramметод форматує дані в:

field1=hello&field2=hello2

Документація Jquery.ajax говорить про те, що існує прапор, processDataякий визначає, чи виконується це кодування автоматично чи ні. У документації йдеться про те, що вона використовується за замовчуванням true, але це не та поведінка, яку я спостерігаю під час POSTвикористання.

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

У запиті POST параметри надсилаються в тілі запиту, тому ви не бачите їх у URL-адресі.

Якщо ви хочете їх побачити, змініть

    type: 'POST',

до

    type: 'GET',

Зауважте, що у веб-переглядачах є інструменти розробки, які дозволяють переглядати повні запити, які видає ваш код. У Chrome це на панелі "Мережа".

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

type: 'POST', Буде додавати ** параметри в тілі запиту ** , який не бачив в URL , а type: 'GET', додає параметри в URL , який видно .

Більшість популярних веб-браузерів містять мережеві панелі, на яких відображається повний запит .

На панелі мережі виберіть XHR, щоб побачити запити .

Це також можна зробити через це.

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

Це можна зробити за допомогою $ .ajax або $ .post

Використання $ .ajax:

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

Використання $ .post:

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

Ваш код був правильним, за винятком того, що ви не передаєте клавіші JSON як рядки.

Навколо нього повинні бути подвійні або одиничні лапки

{"field1": "привіт", "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");
      }
   }
);

Для надсилання параметрів у URL-адресі POSTметоду Ви можете просто додати його до URL-адреси таким чином:

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