Como passar parâmetros no $ ajax POST?

Eu segui o tutorial como indicado neste link. No código abaixo, por algum motivo, os dados não são anexados ao URL como parâmetros, mas se eu os definir diretamente para o URL, /?field1="hello"ele 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 recomendaria que você faça uso do $.postou $.getsintaxe 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 enviar uma string JSON, poderá 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 no 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 dados POST automaticamente para você da mesma forma que para dados GET. O Jquery espera que seus dados sejam pré-formatados para serem anexados ao corpo da solicitação e enviados diretamente pela conexão.

Uma solução é usar a função jQuery.param para criar uma sequência de consultas esperada pela maioria dos scripts que processam solicitações 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");
    }
}); 

Nesse caso, o parammétodo formata os dados para:

field1=hello&field2=hello2

A documentação do Jquery.ajax diz que existe um sinalizador chamado processDataque 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 POSTé usado.

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

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

Se você quiser vê-los, altere

    type: 'POST',

para

    type: 'GET',

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

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

type: 'POST', anexará ** parâmetros ao corpo da solicitação **, que não é visto no URLtype: 'GET' , enquanto anexa parâmetros ao URL que é visível .

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

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

Isso também pode ser feito através disso.

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

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

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

Deve ter aspas duplas ou simples ao seu 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 POSTmétodo Você pode simplesmente anexá-lo a url assim:

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