Como posso enviar um pedido Ajax no botão clique em um formulário com 2 botões?
Olá a todos e peço desculpa por uma pergunta genérica. Sou novo no Ajax e quero enviar um pedido de uma página para outra de um formulário que tem 2 botões.
<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');
}
});
});
});
alguém tem alguma sugestão de Como posso melhorar este código e talvez fundi-lo numa função ou algo assim?
Obrigado antecipadamente! :) 12
Author: Rory McCrossan, 2016-02-04
3 answers
Dado que a única diferença lógica entre os manipuladores é o valor do botão carregado, você pode usar a palavra-chave this
para se referir ao elemento que levantou o evento e obter o val()
a partir daí. Tenta isto.
$("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');
}
});
});
21
Author: Rory McCrossan, 2016-02-04 14:07:27
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/');
});
});
- criado como função separada para enviar o pedido ajax.
- manteve o segundo parâmetro como URL porque no futuro você quer enviar dados para URL diferente
4
Author: Alankar More, 2016-02-04 14:15:23
Use jQuery multiple-selector se a única diferença entre as duas funções for o valor do botão a ser despoletado.
$("#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');
}
});
});
2
Author: kolunar, 2016-02-04 14:32:43