Wie kann ich eine Ajax-Anfrage per Knopfklick aus einem Formular mit 2 Schaltflächen senden?

Question

Hallo alle und Entschuldigung für ein bisschen allgemeine Frage hier. Ich bin neu bei Ajax und möchte eine Anfrage von einer Seite an eine andere von einem Formular senden, das 2 Tasten hat.

<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'); 
     } 
    }); 
    }); 
}); 

Hat bekam jemand irgendwelche Vorschläge, wie ich diesen Code zu verbessern und vielleicht ist es in einer Funktion oder etwas zusammenführen?

Vielen Dank im Voraus! :)

Answer 1

Vorausgesetzt, dass der einzige logische Unterschied zwischen den Handlern ist der Wert der Schaltfläche geklickt, können Sie das this Schlüsselwort auf das Element beziehen, die das Ereignis ausgelöst und die val() von diesem erhalten. Versuchen Sie folgendes:

$("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'); 
     } 
    }); 
}); 

Answer 2

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. als separate Funktion erstellt für die Ajax-Request sendet.
2. Sekunden Parameter als URL gehalten, weil in Zukunft Sie Daten zu senden, um andere URL wollen

Answer 3

Verwenden jQuery multiple-selector wenn der einzige Unterschied zwischen den beiden Funktionen der Wert der Taste ausgelöst wird, ist.

$("#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'); 
     } 
    }); 
});