jQuery, ajax avec méthode POST n'envoie aucun paramètre uniquement sous Firefox

**d3mone** · 08/07/2009, 09h49

Bonjour,

J'ai un problème assez étrange avec jQuery 1.3.2, c'est même le monde à l'envers car tout fonctionne avec IE mais pas avec Firefox.

Le problème:
Je vais donc vous expliquer le problème que j'ai avec FF.

Toutes requêtes Ajax avec la méthode POST n'envoie pas de paramètres.
Alors qu'avec la méthode GET tout fonctionne.

Le contexte:
Pour vous situer le contexte, le serveur web utilise:

EAServer 4.2
Les servlets + JSP (ici mon protocole de test se limite aux servlets)
jQuery 1.3.2 (testé aussi avec la nightly build 1.3.3 et la 1.2.6 sans succès)

Le navigateur web: Firefox 3.5 finale ou 3.0.11 (même comportement)

Le code:

Voici mon protocole de test:
Tout d'abord le servlet me servant de test.
Le servlet retourne tout simplement le code html suivant ' <h1>test :</h1>PARAM ' où PARAM est le paramètre de nom 'test' envoyé indifférement en post ou en get.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
public class TestServlet extends HttpServlet {
 
    /* doGet appel doPost */
    public void doGet(HttpServletRequest req, HttpServletResponse res)
    throws ServletException, IOException {
	doPost(req,res);
    }
 
    public void doPost(HttpServletRequest req, HttpServletResponse res)
    throws ServletException, IOException {
	/*je récupère le parametre 'test'*/
	String paramTest = req.getParameter("test");
 
	/* Je vais envoyé un document html */
	res.setContentType("text/html");
	PrintWriter out = res.getWriter();
	/* Je retourne le contenu de <paramTest>*/
	out.println("<h1>test :</h1>" + paramTest);
    }
}

Ensuite ma page web me servant de test:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<html>
<head>
<title>
	Test du javascript
</title>
<script type="text/javascript" language="Javascript" src="jquery.js"></script>
<script language="JavaScript">
function requeteAjax(){
	  $.ajax({
		type: "POST", 		//avec GET ça fonctionne sans PB
		url: "/WIZ/test",	//C'est l'url pour executer ma servlet
		data: "test=fonctionne",	//les paramètres sont correctements saisies car ça fonctionne en GET
		dataType: "html",	//J'attend un document html en réponse à ma requete Ajax
		success: function(doc) {
			$('body').html(doc);	//Je remplace le body de la page avec le résultat de la requete
		}
	});
}
</script>
</head>
<body>
 
<!-- Appel de la requête ajax qui me pose un PB uniquement sous firefox et uniquement avec la méthode POST -->
<input type="button" value="Envoie de données avec ajax  en post" onclick="javascript:requeteAjax();"/>
 
</body>
</html>

Avec firefox et la méthode POST je me retrouve avec la page suivante:

test :
null

Alors qu'avec IE ou firefox avec la méthode GET je me retrouve avec la page suivante:

test :
fonctionne

Mes tests:
J'ai tout simplement vérifié que ma servlet n'était pas en cause en réalisant un simple formulaire envoyé en POST.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<html>
<head>
<title>
	Test du javascript
</title>
</head>
<body>
<!-- Un formulaire envoyé en post qui fonctionne parfaitement, pour vour prouver que la méthode POST fonctionne bien dans mon servlet -->
<form name="formulaireDeTest" action="/WIZ/test" method="post">
	<input type="hidden" name="test" value="fonctionne"/>
	<input type="submit" value="Envoie de données sans ajax en post"/>
</form>
</body>
</html>

Les données sont bien envoyé à ma servlet et j'obtiens bien la page

test :
fonctionne

Les conclusions:

La servlet semble ne pas être en cause
La syntaxe de l'appel jQuery semble correct car ça fonctionne sous IE
Pourquoi uniquement la méthode POST ne transmet pas les paramètres et ce uniquement sous FF ?
Et pourquoi juste le passage de paramètres merde ?

Je ne sais pas quoi faire, et je ne vois pas d'où viens le problème.
Merci de votre aide par avance

**SpaceFrog** · 08/07/2009, 10h05

regarde au niveaui de jquery si tu as bine

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

de plus post doit etre en minuscules

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

method="post"

et le form avoir un name ... id ne suffit pas

**d3mone** · 08/07/2009, 10h09

Merci de ta réponse rapide SpaceFrog.

Oui, il y est par défaut de toute manière.
Et j'ai même testé de le forcer dans mon appel à la fonction $.ajax mais sans succès.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
$.ajax({
		type: "POST", 
		url: "/WIZ/test",
		data: "test=fonctionne",
		dataType: "html",
 
		//paramètre par défaut que j'ai forcé, mais aucun changement ...
		contentType: "application/x-www-form-urlencoded", 
 
		success: function(doc) {
			$('body').html(doc);
		}
	});

Mon formulaire n'est pas en cause, il est juste là pour vous montrer qu'en utilisant un formulaire avec la méthode 'post' ça fonctionne, alors que ma requête ajax avec la méthode 'post' elle ne fonctionne pas sous FF.
C'est juste une preuve que ma servlet n'est pas en cause - tout du moins c'est l'impression que ça me donne -.

**andry.aime** · 08/07/2009, 10h16

Salut,

Envoyé par SpaceFrog

de plus post doit etre en minuscules

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

type: "POST"

**d3mone** · 08/07/2009, 10h20

en effet andry.aime, la documentation officielle de jQuery préconise de mettre le type en majuscule, j'ai essayé en majuscule et minuscule et ça n'a rien changé.

D'ailleurs, même l'appel suivant me pose exactement le même problème sous FF:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
$.post(	"/WIZ/test", 
	"test=fonctionne",
	function(doc) {
		$('body').html(doc);
	},
	"html");

**SpaceFrog** · 08/07/2009, 10h25

et le name ???

**d3mone** · 08/07/2009, 10h30

J'ai rajouté le name au formulaire histoire de présenter un code HTML correct aux visiteurs, mais mon formulaire n'est pas utilisé lors des rêquetes Ajax.
Je vais un peu mieux expliquer ça dans mon premier post ça évitera la confusion.

**andry.aime** · 08/07/2009, 10h34

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
$.post("/WIZ/test", 
	{test:"fonctionne"},
	function(doc) {
		$('body').html(doc);
	},
	"html");

Tu peux nous dire l'erreur retourner?

**d3mone** · 08/07/2009, 10h39

Merci de vos réponses rapides.

J'ai déjà essayé la notation avec une map : {test:"fonctionne"} et j'ai le même comportement.

Ma page m'affiche après la requête

test :
null

au lieu de

test :
fonctionne

Donc, mon paramètre n'est toujours pas transmis.

**SpaceFrog** · 08/07/2009, 10h42

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{"test":"fonctionne"},

?

**d3mone** · 08/07/2009, 10h49

idem pour {"test":"fonctionne"}, à noter que toutes les syntaxes que vous m'avez demandé de tester sont syntaxiquement correctes, qu'elles fonctionnent sous IE, mais pas sous mon FF.

Je n'ai jamais eu de messages d'erreur sous FF, c'est tout simplement le paramètre qui n'est pas transmis.

Pour faire avancer la chose, sous Firebug, je peux bien voir que le paramètre à était transmis en POST. je vais vous faire un screenshot

**SpaceFrog** · 08/07/2009, 10h52

a tout hasard

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

dataType:  "application/x-www-form-urlencoded",

**d3mone** · 08/07/2009, 10h56

Je viens d'essayer au cas où mais sa ne fonctionne pas.
dataType permet de préciser à jQuery quel type de données il doit attendre de la réponse du serveur web.

dataType

The type of data that you're expecting back from the server. If none is specified, jQuery will intelligently pass either responseXML or responseText to your success callback, based on the MIME type of the response. The available types (and the result passed as the first argument to your success callback) are:

* "xml": Returns a XML document that can be processed via jQuery.
* "html": Returns HTML as plain text; included script tags are evaluated when inserted in the DOM.
* "script": Evaluates the response as JavaScript and returns it as plain text. Disables caching unless option "cache" is used. Note: This will turn POSTs into GETs for remote-domain requests.
* "json": Evaluates the response as JSON and returns a JavaScript Object.
* "jsonp": Loads in a JSON block using JSONP. Will add an extra "?callback=?" to the end of your URL to specify the callback. (Added in jQuery 1.2)
* "text": A plain text string.

J'attends bien du HTML, donc ce paramètre est semble-t-il correcte.

**d3mone** · 08/07/2009, 11h01

voici les prises d'écran de firebug qui laisse suggérer que la requête est bien envoyée

Onglet en-têtes:

Est-ce que c'est du au faite que les données sont envoyés en UTF8 ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
application/x-www-form-urlencoded; charset=UTF-8

Onglet post:

On voit bien mon paramètre de nom 'test' ayant pour valeur 'fonctionne'

Onglet réponse:

On voit bien que la servlet n'a pas pu lire le paramètre et que du coup, elle met null.

**SpaceFrog** · 08/07/2009, 11h03

avec un autre mot que test ? peut être reconnu pas js ffx comme etant du js ?

**d3mone** · 08/07/2009, 11h15

J'ai essayé avec un autre nom de variable et ça ne change rien.
Parcontre je viens de mettre le doigt sur un truc intéressant

Avec la méthode POST le charset semble forcé en UTF-8 car on peu lire ceci dans firebug

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

ContentType: application/x-www-form-urlencoded; charset=UTF-8

Je vais essayer de le forcer en ISO-8859-1 lors de l'appel ajax grâce au paramètre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

contentType: "application/x-www-form-urlencoded;charset=ISO-8859-1",

**andry.aime** · 08/07/2009, 11h16

Dans le JSP:

String paramTest = req.getParameter("test");
.......
out.println("<h1>test :</h1>" + paramTest);

et dans le retour AJAX:

<h1>test :</h1>null

Je pense que le serveur ne reçoit pas le variable posté mais le variable est bien envoyé:

Post
test fonctionne

**d3mone** · 08/07/2009, 11h18

Tout semble suggérer ça andry.aime.

Je n'ai pas réussi à changer le charset. Mais bon, généralement quand c'est un pb de charset c'est juste des caractères qui sont mal interprétés et le problème est souvent du côté du navigateur web lors de l'affichage, et non du côté serveur.

sinon j'ai essayé de mettre le charset de mon EAServer en UTF8 et ça ne change rien.

Le problème semble donc ne pas venir du charset.

**d3mone** · 08/07/2009, 11h38

Chose amusante, si je rajoute le paramètre suivant à l'appel de $.ajax ça ne fonctionne plus du tout, même plus sous IE.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

contentType: "application/x-www-form-urlencoded;",

**d3mone** · 08/07/2009, 11h42

Je viens de faire un petit test sous Lunascape5 qui est un browser internet surlequel on peut choisir le moteur de rendu.

Avec Gecko le moteur de FF ça ne fonctionne pas, avec Trident le moteur d'IE ou WebKit ça fonctionne.

Ca ne me laisse qu'encore plus perplexe tout ça.

jQuery, ajax avec méthode POST n'envoie aucun paramètre uniquement sous Firefox

JavaScript

Discussions similaires

Partager

Partager