Как передать параметры в $ 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");
        }
    });
9 115
jquery ajax

9 ответов:

Я бы рекомендовал вам использовать $.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('superman', { field1: "hello", field2 : "hello2"}, 
     function(returnedData){
        console.log(returnedData);
}, 'json');
104

попробуйте использовать метод 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.

Edit:

Уведомление Об Устаревании: jqXHR.успех(), jqXHR.заблуждение и jqXHR.полные () обратные вызовы удаляются с jQuery 3.0. Вы можете использовать jqXHR.сделать(), jqXHR.fail (), и jqXHR.всегда() вместо этого.

53

Jquery.ajax не кодирует данные POST для вас автоматически так, как это делает для получения данных. Jquery ожидает, что ваши данные будут предварительно сформированы для добавления в тело запроса, которое будет отправлено непосредственно по проводу.

решение заключается в использовании jQuery.параметр функция для построения строки запроса, которую ожидает большинство сценариев, обрабатывающих запросы 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

The Jquery.ajax документация говорит, что есть флаг под названием processData это определяет, выполняется ли эта кодировка автоматически или нет. В документации говорится, что по умолчанию он true, но это не то поведение, которое я наблюдаю, когда есть.

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

на POST request параметры передаются в теле запроса, поэтому вы не видите их в URL.

Если вы хотите их увидеть, измените

    type: 'POST',

до

    type: 'GET',

обратите внимание, что браузеры имеют инструменты разработки, которые позволяют вам видеть полные запросы, которые выдает ваш код. В Chrome он находится на панели "сеть".

10

Вы можете сделать это, используя $.ajax или $.пост

С помощью $.Аякс :

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

С помощью $.сообщение :

    $.post('superman',
      { 
        'field1': 'hello', 
        'field2': 'hello1'
      },
      function (response, status) {
        alert(response.status);
      }
    );
7
$.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 !");
      }
    );
5

ваш код был прав, за исключением того, что вы не передаете ключи 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");
      }
   }
);
3

для отправки параметров в url в POST метод вы можете просто добавить его в url-адрес следующим образом:

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