Javascript Girl
  1. Javascript Girl
  3. L'appel ajax ne fonctionne pas lorsqu'un bouton de soumission est utilisé
Intereting Posts
Remplacez javascript confirmé par jquery confirmez Comment puis-je convertir les nombres en notation scientifique? Ng-repeat event event Obtenir la valeur d'une entrée de numéro HTML5 Comment faire pour ajax POST à ​​php Comment puis-je ajouter un séparateur de milliers à mon formulaire html Erreur XmlHttpRequest: L'origine nulle n'est pas autorisée par Access-Control-Allow-Origin Comment passer un troisième argument à un rappel en utilisant Bluebird.js nodeify SyntaxError: jeton inattendu N dans la console chrome de angularjs Comparez la valeur dans deux feuilles de calcul, si les mêmes cellules de copie de 1 et Collez à la 2ème Les modèles Backbone-Relational related ne sont pas créés Rediriger vers une page intermédiaire avant d'aller sur un site externe JSon appelle l'API à travers TVJS-tvOS Créer et soumettre un formulaire avec javascript D3 – Rotation des étiquettes des axes x

L'appel ajax ne fonctionne pas lorsqu'un bouton de soumission est utilisé

J'essaie d'obtenir un taux de change en direct en utilisant l'API suivante. 

"http://www.exchangerate-api.com/INR/USD/1?k=FQRxs-xT2tk-NExQj"

Lorsque je clique sur un bouton, il indique le taux et fonctionne très bien. J'utilise le code Ajax suivant. 

 <script type="text/javascript" language="javascript"> function testCurrencyRate() { $.ajax({ datatype:"html", type: "GET", url: "ajax/LiveCurrencyRate.php", data: "t="+new Date().getTime(), success: function(response) { alert(response); }, error: function(e) { alert('Error while fetchig the live currency rate.'); } }); } </script>

La requête Ajax s'adresse à la page LiveCurrencyRate.php qui se présente comme suit. 

 $url="http://www.exchangerate-api.com/INR/USD/1?k=FQRxs-xT2tk-NExQj"; $result = file_get_contents($url); echo $result;

Et le <form></form> qui contient le seul bouton qui, lorsqu'il est cliqué, effectue une requête Ajax sur cette URL ajax/LiveCurrencyRate.php . 

 <form id="testForm" name="testForm" action="" method="post"> <input type="submit" id="btnTestCurrencyRate" name="btnTestCurrencyRate" value="Test" onclick="testCurrencyRate();"/> </form>

Tout va bien. Le problème se pose quand je change le type de bouton de type="button" à type="submit" , cela ne fonctionne pas. La zone d'alerte dans la partie d'erreur de la fonction Ajax montre la zone d'alerte juste pendant un certain temps et tout à coup elle disparaît . Je ne trouve aucune cause raisonnable susceptible d'empêcher que cette demande ne soit terminée. La même chose m'a fonctionné dans mon projet précédent, mais j'utilise XMLHttpRequest pour faire des demandes Ajax. Qu'est-ce qui ne va pas ici?

type="submit" fait en sorte que le navigateur Web soumette le formulaire via un postback (car votre attribut de method est défini sur "POST"), ce qui provoque la mise à jour de la page. L'attribut d' action de la <form> détermine l'envoi des données, puis cette page est chargée avec les données fournies. Lorsque cela se produit, tous les javascript sur la page se terminent parce que vous allez effectivement vers une page différente ou que vous rechargez la version actuelle.

La page est soumise car vous n'annulez pas l'action par défaut du clic. Vous devez arrêter l'événement. Avec votre code, vous pouvez ajouter un return false à l'onclick, mais il est préférable d'ajouter les événements de manière discrète. 

 $("#btnTestCurrencyRate").on("click",function(e){ testCurrencyRate(); e.preventDefault(); });

Mieux l'attraper sur la soumission du formulaire et non sur le clic 

 $("#testForm").on("submit",function(e){ testCurrencyRate(); e.preventDefault(); });

Lorsque vous cliquez sur le bouton de soumission, votre formulaire vous envoie le serveur Web. Vous devez empêcher le formulaire de poster en utilisant quelque chose comme: 

 $("#testForm").submit(function(e){ e.preventDefault(); });

Parce que votre page est soumise. Vous devez renvoyer le faux du gestionnaire Onclick si vous voulez empêcher le soumission.

HTML: 

 <input type="submit" id="btnTestCurrencyRate" name="btnTestCurrencyRate" value="Test"/>

JS: 

 document.getElementById('btnTestCurrencyRate').onclick = testCurrencyRate; function testCurrencyRate() { ... snip ... return false; }