Como passar parâmetros no $ ajax POST?

Eu segui o tutorial conforme indicado neste link. No código abaixo, por algum motivo, os dados não são anexados à URL como parâmetros, mas se eu os definir diretamente na url usando /?field1="hello" isso 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"); } }); 

Eu recomendo que você faça uso da syntax $.post ou $.get do jQuery para casos simples:

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

Se você precisar capturar os casos de falha, faça o seguinte:

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

Além disso, se você sempre envia uma string JSON, você pode usar $ .getJSON ou $ .post com mais um parâmetro no final.

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

Tente usar o 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 }); 

Você não pode ver os parâmetros em URL com o método POST.

Editar:

Aviso de descontinuação: Os retornos de chamada jqXHR.success (), jqXHR.error () e jqXHR.complete () são removidos a partir do jQuery 3.0. Você pode usar jqXHR.done (), jqXHR.fail () e jqXHR.always ().

O Jquery.ajax não codifica os dados POST automaticamente para você da maneira como faz para os dados GET. O Jquery espera que seus dados sejam pré-formatados para append ao corpo da solicitação para serem enviados diretamente pela rede.

Uma solução é usar a function jQuery.param para construir uma cadeia de consulta que a maioria dos scripts que processam solicitações POST esperam.

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

Nesse caso, o método param formata os dados para:

 field1=hello&field2=hello2 

A documentação do Jquery.ajax diz que há um sinalizador chamado processData que controla se essa codificação é feita automaticamente ou não. A documentação diz que o padrão é true , mas esse não é o comportamento que observo quando o POST é usado.

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

Em uma solicitação POST , os parâmetros são enviados no corpo da solicitação, por isso você não os vê no URL.

Se você quiser vê-los, mude

  type: 'POST', 

para

  type: 'GET', 

Observe que os navegadores têm ferramentas de desenvolvimento que permitem ver as solicitações completas que seu código emite. No Chrome, está no painel “Rede”.

Você pode fazer isso usando $ .ajax ou $ .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' , acrescentará ** parâmetros ao corpo do pedido ** que não é visto no URL enquanto o type: 'GET' , acrescenta parâmetros ao URL que é visível .

A maioria dos navegadores populares contém painéis de rede que exibem a solicitação completa .

No painel de rede, selecione XHR para ver solicitações .

Isso também pode ser feito por meio disso.

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

Seu código estava certo, exceto que você não está passando as chaves JSON como strings.

Deve ter aspas duplas ou simples ao redor

{“campo1”: “olá”, “campo2”: “olá2”}

 $.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 em url no método POST Você pode simplesmente anexá-lo ao url desta forma:

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