¿Cómo pasar parámetros en $ ajax POST?

He seguido el tutorial como se indica en este enlace. En el siguiente código, por alguna razón, los datos no se agregan a la URL como parámetros, pero si los configuro directamente en la url /?field1="hello", funciona.

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

Le recomendaría que utilice la sintaxis $.posto $.getjQuery para casos simples:

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

Si necesita detectar los casos fallidos, simplemente haga esto:

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

Además, si siempre envía una cadena JSON, puede usar $ .getJSON o $ .post con un parámetro más al final.

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

Intenta usar el método 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
});

No puede ver los parámetros en la URL con el método POST.

Editar:

Aviso de desaprobación: las devoluciones de llamada jqXHR.success (), jqXHR.error () y jqXHR.complete () se eliminan a partir de jQuery 3.0. En su lugar, puede usar jqXHR.done (), jqXHR.fail () y jqXHR.always ().

Jquery.ajax no codifica automáticamente los datos POST de la misma manera que lo hace para los datos GET. Jquery espera que sus datos estén formateados previamente para adjuntarse al cuerpo de la solicitud que se enviará directamente a través del cable.

Una solución es utilizar la función jQuery.param para crear una cadena de consulta que la mayoría de los scripts que procesan las solicitudes POST esperan.

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

En este caso, el parammétodo formatea los datos para:

field1=hello&field2=hello2

La documentación de Jquery.ajax dice que hay un indicador llamado processDataque controla si esta codificación se realiza automáticamente o no. La documentación dice que está predeterminado true, pero ese no es el comportamiento que observo cuando POSTse usa.

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

En una solicitud POST , los parámetros se envían en el cuerpo de la solicitud, es por eso que no los ve en la URL.

Si quieres verlos, cambia

    type: 'POST',

a

    type: 'GET',

Tenga en cuenta que los navegadores tienen herramientas de desarrollo que le permiten ver las solicitudes completas que emite su código. En Chrome, está en el panel "Red".

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

type: 'POST', agregará ** parámetros al cuerpo de la solicitud ** que no se ve en la URLtype: 'GET' , mientras que agrega parámetros a la URL que está visible .

La mayoría de los navegadores web populares contienen paneles de red que muestran la solicitud completa .

En el panel de red, seleccione XHR para ver las solicitudes .

Esto también se puede hacer a través de esto.

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

Puedes hacerlo usando $ .ajax o $ .post

Usando $ .ajax:

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

Usando $ .post:

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

Su código era correcto, excepto que no está pasando las claves JSON como cadenas.

Debe tener comillas dobles o simples a su alrededor.

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

Para enviar parámetros en url en POSTmétodo Puede simplemente agregarlo a url de esta manera:

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