如何在$ ajax POST中传递参数？

Question

我按照此链接中的说明进行了操作.在下面的代码中由于某种原因,数据不作为参数附加到url,但如果我使用/?field1="hello"它直接将它们设置为url 有效.

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

Answer 1

我建议你在简单的情况下使用jQuery的语法$.post或$.get语法:

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

Answer 2

尝试使用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
});

您无法使用POST方法在URL中查看参数.

编辑:

弃用注意:从jQuery 3.0开始,jqXHR.success(),jqXHR.error()和jqXHR.complete()回调将被删除.您可以使用jqXHR.done(),jqXHR.fail()和jqXHR.always()代替.

Answer 3

Jquery.ajax不会像对GET数据那样自动编码POST数据.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使用时观察到的行为.

Answer 4

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

Answer 5

在POST请求中,参数将在请求正文中发送,这就是您在URL中看不到它们的原因.

如果你想看到它们,请改变

    type: 'POST',

至

    type: 'GET',

请注意,浏览器具有开发工具,可让您查看代码发出的完整请求.在Chrome中,它位于"网络"面板中.

Answer 6

我知道这个答案太晚了

您还可以使用 FormData 将数据传递到$.ajax({})

let formData =  new FormData()
formData.append('data1', "Hello")
formData.append('data2', "World")

$.ajax({
   url: '/',
   type: 'POST',
   data: formData,
   contentType: false,
   processData: false,
   cache: false,
   success: function(v){
       console.log(v)
   }
})

Answer 7

您可以使用$ .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);
      }
    );

Answer 8

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

type: 'POST',将**参数附加到请求的主体**,这是在URL 中看不到的,同时 将参数附加到可见的URL .type: 'GET'

大多数流行的Web浏览器都包含显示完整请求的网络面板.

在网络面板中选择XHR以查看请求.

这也可以通过这个来完成.

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