Comment passer des parameters 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 parameters, mais si je les mets directement dans l’URL en utilisant /?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 $.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, faites simplement ceci:

 $.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 parameters dans l’URL avec la méthode POST.

Modifier:

Avis de déchéance : 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 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 requête afin d’être envoyées directement sur le réseau.

Une solution consiste à utiliser la fonction jQuery.param pour générer une chaîne de requête attendue par la plupart des scripts traitant 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 méthode param formate les données pour:

 field1=hello&field2=hello2 

La documentation de Jquery.ajax indique qu’il existe un indicateur appelé processData qui contrôle si cet encodage 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 le POST est utilisé.

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

Dans une requête POST , les parameters 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 génère. Dans Chrome, c’est dans le panneau “Réseau”.

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); } ); 
 $.ajax( { type: 'post', url: 'superman', data: { "field1": "hello", "field2": "hello1" }, success: function (response) { alert("Success !!"); }, error: function () { alert("Error !!"); } } ); 

type: 'POST' , va append ** parameters au corps de la requête ** qui n’est pas visible dans l’ URL alors que le type: 'GET' , ajoute des parameters à l’URL qui est visible .

La plupart des navigateurs Web les plus populaires contiennent des panneaux réseau qui affichent la requête 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 !"); } ); 

Votre code était correct sauf que vous ne transmettez pas les clés JSON en tant que chaînes.

Il devrait contenir des guillemets doubles ou simples

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

Pour les parameters d’envoi dans l’URL dans la méthode POST Vous pouvez simplement les append à l’URL comme ceci:

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