POST ou XMLHttpRequest ?

Version imprimable

15/05/2024, 12h14
souviron34

POST ou XMLHttpRequest ?

Bonjour

J'ai un petit problème au niveau Javascript/Php. J'ai également posté dans le forum PHP et je vais inclure le lien iici

En simple résumé :

est-ce que avoir une form qui contient une action de type POST et un bouton SUBMIT peut être remplacée par une div contenant un bouton qui va envoyer une requête htttp de type POST ?

Est-ce que du point de vue du destinataire (c'est une tierce partie sur un autre site) c'est identique ??

Merci de vos points de vue / explications :D
15/05/2024, 13h30
Toufik83

Bonjour,

Oui, vous pouvez faire ceci avec la fonction fetch par exemple, qui permet de construire et envoyer une requête xmlhttprequest avec les données transmises.

Le plus important c'est d'attacher un écouteur de clic au bouton correspondant..

Merci

En fait c'est pour accrocher des paiements Paypal..

J'ai une page avec plusieurs objets (2, dont 1 en quantité variable)..

Le code pour ajouter au panier est :

Code:

1
2
3
4
5
6
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
  <input type="hidden" name="cmd" value="_s-xclick" />
  <input type="hidden" name="hosted_button_id" value="XXXXX" />
  <input type="hidden" name="currency_code" value="CAD" />
  <input type="image" src="https://www.paypalobjects.com/fr_CA/i/btn/btn_cart_LG.gif" border="0" name="submit" title="PayPal, le réflexe sécurité pour payer en ligne" alt="Ajouter au panier" />
</form>

Je suppose que si je transform ceci en :

Code:

1
2
3
4
5
6
<div>
  <input type="hidden" name="cmd" value="_s-xclick" />
  <input type="hidden" name="hosted_button_id" value="XXXXX" />
  <input type="hidden" name="currency_code" value="CAD" />
  <input type="image" id=ok name=ok alt="Ajouter au panier" onclick=envoi() />
</div>

Code:

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
function envoi(){
     var s;
     s = "cmd=\"_s-xclick\" hosted_button_id=\"XXXXX\" currency_code=\"CAD\" submit=true";
     post ("https://www.paypal.com/cgi-bin/webscr",s, yy, zz, true);
}
 
function post(url,a,cb,d,erf,sy){var r=gXhr();    
    r.addEventListener("load",function(){
           if(this.status>=200 && this.status<400){
                  if(cb!= null){
                        cb(d,this.responseText);}
                  else 
                      alert("REP "+this.responseText)}
          else{
               if(erf!=null)erf(this.status+" "+this.statusText);
              else alert("Erreur réseau "+this.status+" "+this.statusText)}
    });
    r.addEventListener("error",function(){
                 if(erf!=null)erf("Erreur réseau "+this.status+" "+this.statusText);
                 else alert("Erreur réseau "+this.status+" "+this.statusText)
 
    });
    r.open("POST",url,sy);
    r.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    r.send(a);
}

ou bien en créant un FormData message...

Ça marcherait, non ?

Merci

15/05/2024, 14h37
Toufik83
Bonjour,

Je vois des trucs qui clochent :
- Absence des guillemets ou apostrophes autour des valeurs des attributs id et name <input ... id=ok name=ok ... onclick=envoi() />
- La déclaration de la fonction function post(url,a,cb,d,erf,sy) avec 6 paramètres, mais l'appelle avec 5 seulement post ("https://www.paypal.com/cgi-bin/webscr",s, yy, zz, true);
- Utilisez des noms de paramètres/variables explicites au lieu de a,cb,d,erf,sy,s,yy,zz
Apart ça, je pense que ça marcherait oui, mais vous utilisez l'ancienne méthode, maintenant il existe fetch comme je vous l'ai dit.
15/05/2024, 19h09
souviron34
Bonjour Toufik
Citation:
Envoyé par Toufik83

Je vois des trucs qui clochent :

Absence des guilleumets ou apostrophes autour des valeurs des attributs id et name <input ... id=ok name=ok ... onclick=envoi() />
La déclaration de la fonction function post(url,a,cb,d,erf,sy) avec 6 paramètres, mais l'appelle avec 5 seulement post ("https://www.paypal.com/cgi-bin/webscr",s, yy, zz, true);
oui j'ai été vite fait, car c'est pas le coeur de ma question.. J'ai plus de 95000 lignes de code javascript fonctionnelles...
Citation:
Envoyé par Toufik83

Utilisez des noms de paramètres/variables explicites au lieu de a,cb,d,erf,sy,s,yy,zz
Minifcation ??? pour quelque chose d'opérationnel c'est essentiel.

Citation:

Envoyé par Toufik83

Apart ça, je pense que ça marcherait oui, mais vous utilisez l'ancienne méthode, maintenant il existe fetch comme je vous l'ai dit.

Oui je te remercie j'ai vite regardé, et j'approfondirais demain..

Merci
:D
17/05/2024, 06h56
Olivier C

L'absence de guillemets autour des valeurs des attributs HTML est une possibilité mais n'est pas recommandé.

Pour le JS, vous pouvez éviter d'échapper les guillemets avec des antislashs, par exemple en jouant avec les guillemets simples et double, mais ils y a en réalité bien mieux encore : les littéraux de gabarits.

https://developer.mozilla.org/fr/doc...plate_literals