web-dev-qa-db-fra.com

Comment passer des paramètres dans $ ajax POST?

J'ai suivi le tutoriel comme indiqué dans le lien this . 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 attribue directement à l'URL à l'aide de /?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");
        }
    });
jqueryajax
129
user4127

Je vous recommanderais d'utiliser la syntaxe $.post ou $.get de jQuery pour les cas simples:

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

Si vous avez besoin d'attraper 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');
_
116
Alvaro

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.

Modifier:

Avis de déprécation: 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.

58
Ajith S

Jquery.ajax ne code pas automatiquement les données POST _ comme vous le feriez pour les données GET. Jquery s'attend à ce que vos données soient préformatées et ajoutées au corps de la demande pour être envoyées directement sur le réseau.

Une solution consiste à utiliser la fonction jQuery.param pour créer une chaîne de requête conforme à la plupart des scripts prenant en charge les demandes 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 méthode param formate les données pour:

field1=hello&field2=hello2

La documentation Jquery.ajax indique qu'il existe un indicateur appelé processData qui contrôle si ce codage est effectué automatiquement ou non. La documentation indique que la valeur par défaut est true, mais ce n'est pas le comportement que j'observe lorsque POST est utilisé.

45
Stephen Ostermiller
    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");
        }
    });   
}
14
SiwachGaurav

Dans demande POST , les paramètres sont envoyés dans le corps de la demande, 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 demandes complètes que votre code pose. Dans Chrome, c'est dans le panneau "Réseau".

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

type: 'POST', ajoutera ** paramètres au corps de la requête ** qui est non v dans le URL tant que type: 'GET', ajoute des paramètres à l'URL qui est visible.

La plupart des navigateurs Web populaires contiennent des panneaux de réseau qui affichent le caractère requête complète.

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

Cela peut aussi être fait via cela.

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

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

En utilisant $ .post:

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

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

Il devrait y avoir des guillemets simples ou doubles

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