Comment passer des paramètres dans $ ajax POST?

J'ai suivi le tutoriel comme indiqué dans ce lien. Dans le code ci-dessous, pour une raison quelconque, les données ne sont pas ajoutées à l'url en tant que paramètres, mais si je les définit directement sur l'URL, /?field1="hello"cela fonctionne.

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

Je vous recommande d'utiliser la syntaxe $.postou $.getde jQuery pour des cas simples:

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

Si vous devez détecter les cas d'échec, procédez comme suit:

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

De plus, si vous envoyez toujours une chaîne JSON, vous pouvez utiliser $ .getJSON ou $ .post avec un paramètre supplémentaire à la toute fin.

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

Essayez d'utiliser la méthode 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
});

Vous ne pouvez pas voir les paramètres dans l'URL avec la méthode POST.

Éditer:

Avis de dépréciation : les rappels jqXHR.success (), jqXHR.error () et jqXHR.complete () sont supprimés à partir de jQuery 3.0. Vous pouvez utiliser jqXHR.done (), jqXHR.fail () et jqXHR.always () à la place.

Jquery.ajax n'encode pas automatiquement les données POST pour vous comme il le fait pour les données GET. Jquery s'attend à ce que vos données soient préformatées pour être ajoutées au corps de la demande pour être envoyées directement sur le câble.

Une solution consiste à utiliser la fonction jQuery.param pour créer une chaîne de requête attendue par la plupart des scripts qui traitent les requêtes 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");
    }
}); 

Dans ce cas, la paramméthode formate les données en:

field1=hello&field2=hello2

La documentation Jquery.ajax indique qu'il existe un indicateur appelé processDataqui contrôle si cet encodage est effectué automatiquement ou non. La documentation indique qu'il est par défaut true, mais ce n'est pas le comportement que j'observe quand POSTest utilisé.

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

Dans une requête POST , les paramètres sont envoyés dans le corps de la requête, c'est pourquoi vous ne les voyez pas dans l'URL.

Si vous voulez les voir, changez

    type: 'POST',

à

    type: 'GET',

Notez que les navigateurs ont des outils de développement qui vous permettent de voir les requêtes complètes que votre code émet. Dans Chrome, c'est dans le panneau "Réseau".

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

type: 'POST', ajoutera ** des paramètres au corps de la requête ** qui ne sont pas visibles dans l' URL tandis que type: 'GET', ajoute des paramètres à l'URL qui est visible .

La plupart des navigateurs Web populaires contiennent des panneaux réseau qui affichent la demande complète .

Dans le panneau réseau, sélectionnez XHR pour voir les demandes .

Cela peut également être fait via ceci.

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

Vous pouvez le faire en utilisant $ .ajax ou $ .post

En utilisant $ .ajax:

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

Utilisation de $ .post:

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

Votre code était correct sauf que vous ne transmettez pas les clés JSON sous forme de chaînes.

Il doit être entouré de guillemets doubles ou simples

{"champ1": "bonjour", "champ2": "bonjour2"}

$.ajax(
   {
      type: 'post',
      url: 'superman',
      data: { 
        "field1": "hello", // Quotes were missing
        "field2": "hello1" // Here also
      },
      success: function (response) {
        alert(response);
      },
      error: function () {
        alert("error");
      }
   }
);

Pour envoyer les paramètres dans l'url dans la POSTméthode, vous pouvez simplement l'ajouter à l'url comme ceci:

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