¿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 añaden a la url como parámetros, pero si los configuro directamente en la url usando /?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"); } }); 

Te recomendaría utilizar la syntax $.post o $.get de jQuery para casos simples:

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

Si necesita detectar los casos fallidos, solo 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. Puede usar jqXHR.done (), jqXHR.fail () y jqXHR.always () en su lugar.

Jquery.ajax no codifica los datos POST para usted automáticamente de la manera en que lo hace para los datos GET. Jquery espera que sus datos sean formateados previamente para agregarse al cuerpo de la solicitud para ser enviados directamente a través del cable.

Una solución es usar la función jQuery.param para generar 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 método param formatea los datos para:

 field1=hello&field2=hello2 

La documentación de Jquery.ajax dice que hay un indicador llamado processData que controla si esta encoding se realiza automáticamente o no. La documentación dice que su valor predeterminado es true , pero ese no es el comportamiento que observo cuando se usa POST .

  function FillData() { var param = $("#<%= TextBox1.ClientID %>").val(); $("#tbDetails").append(""); $.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”.

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); } ); 
 $.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 URL mientras type: 'GET' , 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 !"); } ); 

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

Debe tener comillas dobles o simples a su alrededor

{“campo1”: “hola”, “campo2”: “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 la URL en el método POST , simplemente puede agregarlo a la URL de esta manera:

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