web-dev-qa-db-fra.com

Comment puis-je envoyer une demande Ajax en un clic sur un bouton à partir d'un formulaire à 2 boutons?

Bonjour à tous et désolé pour une question un peu générique ici. Je suis nouveau sur Ajax et souhaite envoyer une demande d'une page à une autre à partir d'un formulaire comportant 2 boutons.

<form method="post">
  <button id="button_1" value="val_1" name="but1">button 1</button>
  <button id="button_2" value="val_2" name="but2">button 2</button>
  <input id="access_token" type="hidden" name="access_token" value="<?php echo $_SESSION['access_token']; ?>" />
</form>

$(document).ready(function() {
  $("#button_1").click(function(e) {
    e.preventDefault();
    $.ajax({
      type: "POST",
      url: "/pages/test/",
      data: {
        id: $("#button_1").val(),
        access_token: $("#access_token").val()
      },
      success: function(result) {
        alert('ok');
      },
      error: function(result) {
        alert('error');
      }
    });
  });

  $("#button_2").click(function(e) {
    e.preventDefault();
    $.ajax({
      type: "POST",
      url: "/pages/test/",
      data: {
        id: $("#button_2").val(),
        access_token: $("#access_token").val()
      },
      success: function(result) {
        alert('ok');
      },
      error: function(result) {
        alert('error');
      }
    });
  });
});

Quelqu'un a-t-il des suggestions pour améliorer ce code et le fusionner éventuellement en une seule fonction?

Merci d'avance! :)

javascriptphpjqueryajax
20
Max Maxymenko

Étant donné que la seule différence logique entre les gestionnaires est la valeur du bouton sur lequel vous avez cliqué, vous pouvez utiliser le mot clé this pour faire référence à l'élément qui a déclenché l'événement et obtenir la val() à partir de celui-ci. Essaye ça:

$("button").click(function(e) {
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "/pages/test/",
        data: { 
            id: $(this).val(), // < note use of 'this' here
            access_token: $("#access_token").val() 
        },
        success: function(result) {
            alert('ok');
        },
        error: function(result) {
            alert('error');
        }
    });
});
31
Rory McCrossan

Utilisez sélecteur multiple de jQuery si la seule différence entre les deux fonctions est la valeur du bouton en cours de déclenchement.

$("#button_1, #button_2").on("click", function(e) {
    e.preventDefault();
    $.ajax({type: "POST",
        url: "/pages/test/",
        data: { id: $(this).val(), access_token: $("#access_token").val() },
        success:function(result) {
          alert('ok');
        },
        error:function(result) {
          alert('error');
        }
    });
});
5
kolunar
function sendAjaxRequest(element,urlToSend) {
             var clickedButton = element;
              $.ajax({type: "POST",
                  url: urlToSend,
                  data: { id: clickedButton.val(), access_token: $("#access_token").val() },
                  success:function(result){
                    alert('ok');
                  },
                 error:function(result)
                  {
                  alert('error');
                 }
             });
     }

       $(document).ready(function(){
          $("#button_1").click(function(e){
              e.preventDefault();
              sendAjaxRequest($(this),'/pages/test/');
          });

          $("#button_2").click(function(e){
              e.preventDefault();
              sendAjaxRequest($(this),'/pages/test/');
          });
        });
  1. créé en tant que fonction distincte pour l'envoi de la demande ajax.
  2. Conservé le deuxième paramètre en tant qu'URL car à l'avenir, vous souhaitez envoyer des données à une URL différente
4
Alankar More