Tengo un par de botones para una aplicación de demostración.
<div style="margin-top: 10px;" class="text-center"> <h3>Events</h3> <button id="trackTrace" class="btn btn-warning">TrackTrace()</button> <button id="trackException" class="btn btn-warning">TrackException()</button> <button id="trackEvent" class="btn btn-warning">TrackEvent()</button> </div>Ahora me gustaría emitir llamadas AJAX cuando se hace clic en uno de los botones. Resolví esto de la siguiente manera.
<script> $("#trackTrace").click(function () { $.ajax({ url: "/api/event/trace", type: "GET", success: function (result, status, xhr) { $("#message").text("Success").show(); }, error: function (xhr, status, error) { $("#error").text("Error").show(); } }) }); ... </script>Sin embargo, esto parece romper el principio SECO, no quiero repetir eso para cada botón. Claro que podría mover la visualización del texto a una función separada.
Sin embargo, las siguientes llamadas showError() y showSuccess() incluso si la llamada AJAX estuvo bien.
function showSucess(result, status, xhr) { $("#message").text("Success").show(); }; function showError(xhr, status, error) { $("#error").text("Exception thrown on Backend-API!").show(); }; $("#trackTrace").click(function () { $.ajax({ url: "/api/event/trace", type: "GET", success: showSucess(), error: showError() }) }); Entonces, ¿cómo puedo simplificar mi código? Estoy buscando una forma similar a un switch que actúe sobre los clics del botón.
success: showSuccess, - O tiene que devolver una función $("#eventContainer .track").on("click", function () { $.ajax({ url: "/api/event/" + this.dataset.url, type: "GET", success: showSucess, error: showError }) }) <div id="eventContainer" style="margin-top: 10px;" class="text-center"> <h3>Events</h3> <button id="trackTrace" class="track btn btn-warning" data-url="tracktrace">TrackTrace()</button> <button id="trackException" class="track btn btn-warning" data-url="trackexception">TrackException()</button> <button id="trackEvent" class="track btn btn-warning" data-url="trackevent">TrackEvent()</button> </div>HTML:
<div style="margin-top: 10px;" class="text-center"> <h3>Events</h3> <button data-url="/api/event/trace" class="btn btn-warning">TrackTrace()</button> <button data-url="/api/event/exception" class="btn btn-warning">TrackException()</button> <button data-url="/api/event/event" class="btn btn-warning">TrackEvent()</button> </div>JS:
$("button[data-url]").each(function () { const clickedElement = this; $(this).click(function () { $.ajax({ url: clickedElement.dataset.url, type: "GET", success: function (result, status, xhr) { $("#message").text("Success").show(); }, error: function (xhr, status, error) { $("#error").text("Error").show(); } }) }); }); Tenga en cuenta que no necesita asignar una id a sus botones. Además, no estoy 100% seguro de que la sintaxis sea correcta ya que no he trabajado con jQuery por un tiempo