Ajax et post
Smoking bird
Messages postés
911
Statut
Membre
-
18 juin 2009 à 21:09
Smoking bird Messages postés 911 Statut Membre -
Smoking bird Messages postés 911 Statut Membre -
Bonjour,
J'essais de faire fonctionner ce script, en vain:
il me recharge toute la page, alors que je lui demande de charger qu'un bout précis de ladite page :S je pense que le problème se situe sur un mauvais blocage du submit :s...
Quelqu'un aurait il une idée?
Cordialement,
Smoke
J'essais de faire fonctionner ce script, en vain:
<form
onSubmit='javascript: return ajaxPost("root=pannelContribution&branch=currentArticleDiscuss&referer=e6b1dd22b5&sct=&third=writeComment","droping","'comment'+comment");'
class='block float W550'
id='writeComment'
method='post' >
<h3 class='titre'>::comment::</h3><br />
<h5 class='errors'></h5><input class='W200' type='text' name='comment[titre]' maxlength=30/>
<textarea class='inheritWidth H200' name='comment[texte]' maxlength=1000></textarea>
<fieldset class='inheritWidth' style='float:left; display:block; clear:both;' class='cleared'><legend>--SEND--</legend>
<input type='image' name='Envoyer' title='Envoi de formulaire' src='send.png'/>
</fieldset></form>
il me recharge toute la page, alors que je lui demande de charger qu'un bout précis de ladite page :S je pense que le problème se situe sur un mauvais blocage du submit :s...
Quelqu'un aurait il une idée?
Cordialement,
Smoke
A voir également:
- Ajax et post
- Brouillon post instagram - Guide
- Code post - Télécharger - Vie quotidienne
- Post it windows - Télécharger - Agendas & Calendriers
- Billing post code ✓ - Forum Réseaux sociaux
- Post it sur mac - Forum MacOS
14 réponses
Bsr
D'abord faudrait indiquer le code de ta fonction ajaxPost. Fait-elle partie d'un framework javascript quelconque ?
Ensuite c'est quoi tout ce code dans le onsubmit ?
Enfin normalement si tu ne veux pas recharger complètement ta page tu ne dois pas valider tes formulaires (donc pas d'utilisation du submit)
Maintenant si tu tiens absolument à utiliser onsubmit arrange-toi pour que ta fonction ajaxPost retourne bien false
D'abord faudrait indiquer le code de ta fonction ajaxPost. Fait-elle partie d'un framework javascript quelconque ?
Ensuite c'est quoi tout ce code dans le onsubmit ?
Enfin normalement si tu ne veux pas recharger complètement ta page tu ne dois pas valider tes formulaires (donc pas d'utilisation du submit)
Maintenant si tu tiens absolument à utiliser onsubmit arrange-toi pour que ta fonction ajaxPost retourne bien false
Bonsoir Php,
Voici ma fonction:
pour les autres points, je vais faire quelques essais avec mon script^^
Merci de ton aide :), je reviens poster mes résultats quand j'aurais pu les faire :$
Voici ma fonction:
function ajaxPost(inst,targeter,post){
var target=document.getElementById(targeter);
if(window.XMLHttpRequest) {
var htr=new XMLHttpRequest();
}
if(window.ActiveXObject) {
var htr=new ActiveXObject('Microsoft.XMLHTTP');
}
var url="analyzer.php?"+inst;
htr.open("POST",url,true);
htr.onreadystatechange=function (){
if(htr.readyState==4){ target.innerHTML=htr.responseText; }else{ target.innerHTML="<?php echo $wait; ?>"; }
}
htr.send(post);
}
pour les autres points, je vais faire quelques essais avec mon script^^
Merci de ton aide :), je reviens poster mes résultats quand j'aurais pu les faire :$
<form
class='block float W550'
id='writeComment'
method='post' >
<h3 class='titre'>::comment::</h3><br />
<h5 class='errors'></h5><input class='W200' type='text' name='comment[titre]' maxlength=30/>
<textarea class='inheritWidth H200' name='comment[texte]' maxlength=1000></textarea>
<fieldset class='inheritWidth' style='float:left; display:block; clear:both;' class='cleared'><legend>--SEND--</legend>
<input onclick='javascript:ajaxPost("root=pannelContribution&branch=currentArticleDiscuss&referer=e6b1dd22b5&sct=&third=writeComment","droping","'comment'+comment");' type='image' name='Envoyer' title='send form' src='send.png'/>
</fieldset></form>
voici ma première correction, ça ne fonctionne toujours pas :s
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
bsr
Comme ceci ça fonctionne mais le code reste qd même pas top de chez top ;-)
analyzer.php
Comme ceci ça fonctionne mais le code reste qd même pas top de chez top ;-)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Test AJAX</title>
<meta http-equiv="Content-Language" content="fr" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
<?php
$wait="Waiting...";
?>
function ajaxPost1(params,targeter)
{
var target=document.getElementById(targeter);
if (window.XMLHttpRequest)
{
htr=new window.XMLHttpRequest();
}
else
{
if (window.ActiveXObject)
{
htr=new ActiveXObject('Microsoft.XMLHTTP');
}
}
htr.onreadystatechange=function ()
{
if (htr.readyState == 4)
{
if ((htr.status >= 200) && (htr.status < 300))
{
target.innerHTML=htr.responseText;
}
else
{
target.innerHTML="Erreur !";
}
}
else
{
target.innerHTML="<?php echo $wait; ?>";
}
}
var url="analyzer.php";
htr.open("POST",url,true);
htr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
htr.send(params);
}
</script>
</head>
<body>
<form>
<h3 class='titre'>::comment::</h3><br />
<h5 class='errors'></h5><input class='W200' type='text' name='comment[titre]' maxlength=30/>
<textarea class='inheritWidth H200' name='comment[texte]' maxlength=1000></textarea>
<fieldset class='inheritWidth' style='float:left; display:block; clear:both;' class='cleared'><legend>--SEND--</legend>
<input onclick='ajaxPost1("root=pannelContribution&branch=currentArticleDiscuss&referer=e6b1dd22b5&sct=&third=writeComment","droping");' type='button' value='send'>
</fieldset>
</form>
<div id="droping">
</div>
</body>
</html>
analyzer.php
<?php
header('Content-Type: text/html; charset=ISO-8859-1');
var_dump($_POST);
?>
hum alors attends, que j'comprenne...
tu commences par des tests pour l'objet ajax qu'on peut ouvrir, comme dans ma fonction, mais en mieux^^...
puis tu place le onreadystatechange, pourquoi le faire à ce moment? C'est pas un peu tôt? ou je le fais trop tard? :$
Ensuite tu créé la var url, puis tu mets un setrequestheader (qui est une fonction dont j'ignore complètement l'utilité :$) et tu envoi l'objet
C'est normal que tu ne prépare pas le retour de données? :$
Bon et après tu créé un form sans attributs, je vais me faire démolir par le validateur comme ça, ça pourrirait mon truc si j'mettais au moins method?
que fais tu du troisième paramètre dans ma première fonction? j'ai vu que le premier paramètre de la fonction ajaxPost1 devenait la valeur de htr.send(), je ne comprends pas pourquoi :s pourrais tu m'éclairer?
tu commences par des tests pour l'objet ajax qu'on peut ouvrir, comme dans ma fonction, mais en mieux^^...
puis tu place le onreadystatechange, pourquoi le faire à ce moment? C'est pas un peu tôt? ou je le fais trop tard? :$
Ensuite tu créé la var url, puis tu mets un setrequestheader (qui est une fonction dont j'ignore complètement l'utilité :$) et tu envoi l'objet
C'est normal que tu ne prépare pas le retour de données? :$
Bon et après tu créé un form sans attributs, je vais me faire démolir par le validateur comme ça, ça pourrirait mon truc si j'mettais au moins method?
que fais tu du troisième paramètre dans ma première fonction? j'ai vu que le premier paramètre de la fonction ajaxPost1 devenait la valeur de htr.send(), je ne comprends pas pourquoi :s pourrais tu m'éclairer?
lol
disons que j'ai supprimé certains trucs que tu peux remettre (comme par ex ton 3eme paramètre ou les attributs de la balise form) avant de trouver que le pb provenait de ton input avec une image
Pour la propriété onreadystatechange je pense pas que l'ordre ait de l'importance tant que tu n'appelles pas send() bien sûr ! Cette propriété est disponible dès que ton objet hrt est créé.
htr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
C'est à priori nécessaire uniquement avec la méthode POST : pour indiquer au serveur que tu lui envoies des paramètres via HTTP POST ? peut-être mais là je suis pas sûr ;-)
Avec POST dans le open on fait comme ceci
var url="analyzer.php";
htr.open("POST",url,true);
htr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
htr.send(params);
Avec GET dans le open on fait comme cela
var url="analyzer.php?"+params;
htr.open("GET",url,true);
htr.send(null);
C'est normal que tu ne prépare pas le retour de données? :$
Qu'entends-tu par préparer les données ? Ici je t'ai donnée un ex avec du texte brut. C'est sûr que normalement tu dois analyser le contenu de responseText qui peut contenir autre chose que de l'html : JSON, script etc
disons que j'ai supprimé certains trucs que tu peux remettre (comme par ex ton 3eme paramètre ou les attributs de la balise form) avant de trouver que le pb provenait de ton input avec une image
Pour la propriété onreadystatechange je pense pas que l'ordre ait de l'importance tant que tu n'appelles pas send() bien sûr ! Cette propriété est disponible dès que ton objet hrt est créé.
htr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
C'est à priori nécessaire uniquement avec la méthode POST : pour indiquer au serveur que tu lui envoies des paramètres via HTTP POST ? peut-être mais là je suis pas sûr ;-)
Avec POST dans le open on fait comme ceci
var url="analyzer.php";
htr.open("POST",url,true);
htr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
htr.send(params);
Avec GET dans le open on fait comme cela
var url="analyzer.php?"+params;
htr.open("GET",url,true);
htr.send(null);
C'est normal que tu ne prépare pas le retour de données? :$
Qu'entends-tu par préparer les données ? Ici je t'ai donnée un ex avec du texte brut. C'est sûr que normalement tu dois analyser le contenu de responseText qui peut contenir autre chose que de l'html : JSON, script etc
hum justement j'parlais du responseText absent de ta fonction^^ je comprends mieux pourquoi maintenant :)
bon, j'me suis contenté -juste pour tester, de remplacer que le input
et ça a fonctionné : o)
du coup, j'ai voulu adapter à mon contexte actuel, et j'ai raté mon coup -_- ça me met unterminated string litteral sur:
ajaxPost("root=pannelContribution&branch=currentArticleDiscuss&referer=6d90f535e1&sct=c55152c745&third=writeComment","droping","'comment'+comment");"
donc je cherche à corriger, mais on tient une bonne piste là, merci :o)
bon, j'me suis contenté -juste pour tester, de remplacer que le input
et ça a fonctionné : o)
du coup, j'ai voulu adapter à mon contexte actuel, et j'ai raté mon coup -_- ça me met unterminated string litteral sur:
ajaxPost("root=pannelContribution&branch=currentArticleDiscuss&referer=6d90f535e1&sct=c55152c745&third=writeComment","droping","'comment'+comment");"
donc je cherche à corriger, mais on tient une bonne piste là, merci :o)
ah! ah! ah!
Ca m'a tout l'air de fonctionner :D
Je prépare mes corrections et petits ajouts, et je reviens te tiendre au courant et mettre le sujet en résolu :) en tous cas merci de ton aide, ta patience et tes explications :D sans toi j'aurais pas été bien loin!
Bonne soirée : o)
Ca m'a tout l'air de fonctionner :D
Je prépare mes corrections et petits ajouts, et je reviens te tiendre au courant et mettre le sujet en résolu :) en tous cas merci de ton aide, ta patience et tes explications :D sans toi j'aurais pas été bien loin!
Bonne soirée : o)
hum finalement j'ai une question....
sans attributs action, et en utilisant cette fonction, comment je fais pour transmettre les valeurs suivantes:
'root=pannelContribution&branch=currentArticleDiscuss&referer=6d90f535e1&sct=c55152c745&third=writeComment
? et pour les exploiter surtout, elles correspondent à ce que serait l'attribut action, et me servent à dire quels scripts déclencher pour faire mes enregistrements :s :$...
sans attributs action, et en utilisant cette fonction, comment je fais pour transmettre les valeurs suivantes:
'root=pannelContribution&branch=currentArticleDiscuss&referer=6d90f535e1&sct=c55152c745&third=writeComment
? et pour les exploiter surtout, elles correspondent à ce que serait l'attribut action, et me servent à dire quels scripts déclencher pour faire mes enregistrements :s :$...
Bjr
Hum si tu veux simuler le bouton submit sans envoyer le formulaire mais en utilisant AJAX tu dois sérialiser le contenu de ton formulaire.
Je te le dis tout de suite c'est loin d'être trivial ;-) J'ai un code JS qui le fait mais en utilisant un objet JS statique.
Hum si tu veux simuler le bouton submit sans envoyer le formulaire mais en utilisant AJAX tu dois sérialiser le contenu de ton formulaire.
Je te le dis tout de suite c'est loin d'être trivial ;-) J'ai un code JS qui le fait mais en utilisant un objet JS statique.
hum d'accord :D mal barré en gros ^^
j'suis pas du tout calé en POO javascript^^ mais j'suis quand même curieux, tu pourrais me montrer ton code?
Je sais qu'il y a une fonction serialize en php, y'a t il un rapport?
Sinon, j'ai pensé à envoyer les paramètres de l'url action en input hidden, ça me paraît être une alternative intéressante, qu'en penses tu?
Bonjour au fait :)
j'suis pas du tout calé en POO javascript^^ mais j'suis quand même curieux, tu pourrais me montrer ton code?
Je sais qu'il y a une fonction serialize en php, y'a t il un rapport?
Sinon, j'ai pensé à envoyer les paramètres de l'url action en input hidden, ça me paraît être une alternative intéressante, qu'en penses tu?
Bonjour au fait :)
Hidden ou non dès que tu valides un formulaire la page est rechargée avec l'url indiquée dans action. Donc c'est pas l'idéal avec AJAX
la fonction serialize de php transforme en fait n'importe quelle variable en chaîne de caractères pouvant être stockée dans un fichier ou une base de données. C'est d'ailleurs utilisé par les sessions en php.
Par sérialisation du formulaire je veux dire faire ne sorte de récupérer les noms de tous les champs et leur valeur respective
Voici un ex qui peut être amélioré ou adapté selon les besoins
Je créé un objet nommé FormSerializer
Pour sérialiser un formulaire il suffit d'appeller la méthode FormSerializer.serialize() avec l'identifiant du formumlaire passé en paramètre et c'est tout ;-) Le méthode se débrouille pour parcourir le formulaire et rétrouver tous les champs et leur valeur.
FormSerializer.serialize() retourne la chaîne de tous les paramètres présents dans le formulaire sous la forme
"champ0=valeur_champ0&champ1=valeur_champ1& ... champN=valeur_champN"
mais ce n'est qu'une possibilité
Après appel à FormSerializer.serialize() pour récupérer de nouveau la chaîne des paramètres il suffit d'appeler la méthode FormSerializer.getParamString()
Note que c'est cette même méthode que initialize() appelle en interne ;-)
Concrètement FormSerializer stocke tous les champs trouvés dans un formulaire dans le tableau fields
FormSerializer.fields permet d'y accèder
Chaque élément par ex FormSerializer.fields[0] est lui-même un objet qui contient les 2 propriétés suivantes
name : retourne le nom du champ
value : retourne la valeur du champ
On peut donc utiliser FormSerializer.fields[0].name et FormSerializer.fields[0].value : pratique non ?
Note que plusieurs paramètres peuvent porter le même nom car j'ai préféré faire un truc simple plutôt que de stocker des objets imbriqués.
Nota : tu peux très bien remplacer
if (node.nodeType != DOM.nodetype.ELEMENT_NODE) return;
par
if (node.nodeType != 1) return;
et ne pas utiliser du tout l'objet DOM qui ne sert ici qu'à stocker des constantes.
Voilà le code (il se peut qu'il reste des bugs lol) :
la fonction serialize de php transforme en fait n'importe quelle variable en chaîne de caractères pouvant être stockée dans un fichier ou une base de données. C'est d'ailleurs utilisé par les sessions en php.
Par sérialisation du formulaire je veux dire faire ne sorte de récupérer les noms de tous les champs et leur valeur respective
Voici un ex qui peut être amélioré ou adapté selon les besoins
Je créé un objet nommé FormSerializer
Pour sérialiser un formulaire il suffit d'appeller la méthode FormSerializer.serialize() avec l'identifiant du formumlaire passé en paramètre et c'est tout ;-) Le méthode se débrouille pour parcourir le formulaire et rétrouver tous les champs et leur valeur.
FormSerializer.serialize() retourne la chaîne de tous les paramètres présents dans le formulaire sous la forme
"champ0=valeur_champ0&champ1=valeur_champ1& ... champN=valeur_champN"
mais ce n'est qu'une possibilité
Après appel à FormSerializer.serialize() pour récupérer de nouveau la chaîne des paramètres il suffit d'appeler la méthode FormSerializer.getParamString()
Note que c'est cette même méthode que initialize() appelle en interne ;-)
Concrètement FormSerializer stocke tous les champs trouvés dans un formulaire dans le tableau fields
FormSerializer.fields permet d'y accèder
Chaque élément par ex FormSerializer.fields[0] est lui-même un objet qui contient les 2 propriétés suivantes
name : retourne le nom du champ
value : retourne la valeur du champ
On peut donc utiliser FormSerializer.fields[0].name et FormSerializer.fields[0].value : pratique non ?
Note que plusieurs paramètres peuvent porter le même nom car j'ai préféré faire un truc simple plutôt que de stocker des objets imbriqués.
Nota : tu peux très bien remplacer
if (node.nodeType != DOM.nodetype.ELEMENT_NODE) return;
par
if (node.nodeType != 1) return;
et ne pas utiliser du tout l'objet DOM qui ne sert ici qu'à stocker des constantes.
Voilà le code (il se peut qu'il reste des bugs lol) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Test sérialisation de formulaire</title>
<meta http-equiv="Content-Language" content="fr" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">
var DOM = {};
DOM.nodetype =
{
ELEMENT_NODE : 1,
ATTRIBUTE_NODE : 2,
TEXT_NODE : 3,
CDATA_SECTION_NODE : 4,
ENTITY_REFERENCE_NODE : 5,
ENTITY_NODE : 6,
PROCESSING_INSTRUCTION_NODE : 7,
COMMENT_NODE : 8,
DOCUMENT_NODE : 9,
DOCUMENT_TYPE_NODE : 10,
DOCUMENT_FRAGMENT_NODE : 11,
NOTATION_NODE : 12
}
var FormSerializer = {}
FormSerializer.addField = function(name,value)
{
this.fields.push({name:name, value:value});
}
FormSerializer.callBack = function(node)
{
if (node.nodeType != DOM.nodetype.ELEMENT_NODE) return;
if (typeof node.type != "undefined")
{
switch (node.type.toLowerCase()) {
case 'submit':
break;
case 'hidden':
break;
case 'password':
break;
case 'text':
this.addField(node.name,node.value);
break;
case 'checkbox':
if (node.checked) this.addField(node.name,node.value);
break;
case 'select-one':
if (node.selectedIndex >= 0)
{
var i = node.selectedIndex;
this.addField(node.name,(node.options[i].value) ? node.options[i].value : node.options[i].text);
}
break;
case 'select-multiple':
for (var i = 0; i < node.options.length; i++)
{
if (node.options[i].selected)
{
this.addField(node.name,(node.options[i].value) ? node.options[i].value : node.options[i].text);
}
}
break;
case 'radio':
if (node.checked) this.addField(node.name,node.value);
break;
case 'textarea' :
this.addField(node.name,node.value);
break;
}
}
}
FormSerializer.traverse = function(node)
{
if (!node) return;
this.callBack(node);
for (var i = 0; i < node.childNodes.length; i++)
{
this.traverse(node.childNodes[i]);
}
}
FormSerializer.getParamString = function()
{
var result = "";
for (var i =0; i <this.fields.length; i++)
{
if (result != "") result += "&";
result += this.fields[i].name+"="+escape(this.fields[i].value);
}
return result;
}
FormSerializer.serialize = function(formId)
{
this.frm = document.getElementById(formId);
this.fields = new Array();
this.traverse(this.frm);
return this.getParamString();
}
function testSerialisation(formId)
{
FormSerializer.serialize(formId);
var result = "Contenu du tableau fields\n";
for (var i=0; i < FormSerializer.fields.length; i++)
{
result += "fields["+i+"] : "+FormSerializer.fields[i].name+" = "+FormSerializer.fields[i].value+"\n";
}
result+="\n"+"Chaîne de paramètres : \n"+FormSerializer.getParamString();
alert(result);
}
</script>
</head>
<body>
<form id="demo">
<br />
<fieldset><legend>Champ texte mono-ligne</legend>
<input type="text" name="comment[titre]" size="40" maxlength="40">
</fieldset>
<br />
<fieldset><legend>Textarea multi-ligne</legend>
<textarea name="comment[texte]" cols="40" rows="3"></textarea>
</fieldset>
<br />
<fieldset><legend>Select mono selection</legend>
<select name="liste_mono_selection" size=3>
<option value="mono0">Mono selection 0</option>
<option>Mono selection 1</option>
<option value="mono2">Mono selection 2</option>
</select>
</fieldset>
<br />
<fieldset><legend>Select multi selection</legend>
<select name="liste_multi_selection[]" multiple size=3>
<option value="multi0">Multi selection 0</option>
<option>Multi selection 1</option>
<option value="multi2">Multi selection 2</option>
</select>
</fieldset>
<br />
<fieldset><legend>Radiobox</legend>
Homme : <input type="radio" name="sexe" value="M"><br />
Femme : <input type="radio" name="sexe" value="F">
</fieldset>
<br />
<fieldset><legend>Checkbox</legend>
<input type="checkbox" name="mushrooms">mushrooms<br />
<input type="checkbox" name="greenpeppers">green peppers<br />
<input type="checkbox" name="onions">onions<br />
<input type="checkbox" name="tomatoes">tomatoes
</fieldset>
<input onclick='testSerialisation("demo");' type='button' value='Sérialiser'>
</form>
</body>
</html>
ah.
Je vois.
Tu m'avais pas menti :D ça m'a l'air pointu xD
Bon, ton explication sur serialize m'a rendu curieux et je suis aussi allé voir la doc du coup^^ je sais que j'ai souvent croisé ça, mais je ne comprends pas très bien cette histoire de perte de type ou de variables.
Quoi qu'il en soit, merci pour ton code et l'explication qui va avec :) j'étudierais ça la semaine prochaine, quand toute ma concentration pourra se porter dessus ;)
A bientôt et bon week end :) (et bonne fête de la musique si tu en profite^^)
Je vois.
Tu m'avais pas menti :D ça m'a l'air pointu xD
Bon, ton explication sur serialize m'a rendu curieux et je suis aussi allé voir la doc du coup^^ je sais que j'ai souvent croisé ça, mais je ne comprends pas très bien cette histoire de perte de type ou de variables.
Quoi qu'il en soit, merci pour ton code et l'explication qui va avec :) j'étudierais ça la semaine prochaine, quand toute ma concentration pourra se porter dessus ;)
A bientôt et bon week end :) (et bonne fête de la musique si tu en profite^^)
