Javascript 如何从带有 2 个按钮的表单单击按钮时发送 Ajax 请求？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35203019/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I send an Ajax Request on button click from a form with 2 buttons?
提问by Max Maxymenko
I want to send a request from one page to another from a form which has 2 buttons:
我想将请求从一个页面发送到另一个页面，该表单具有 2 个按钮：
<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');
}
});
});
});
How can I improve this code and maybe merge it into one function?
如何改进此代码并将其合并为一个函数？
回答by Rory McCrossan
Given that the only logical difference between the handlers is the value of the button clicked, you can use the thiskeyword to refer to the element which raised the event and get the val()from that. Try this:
鉴于处理程序之间唯一的逻辑差异是单击按钮的值，您可以使用this关键字来引用引发事件的元素并从中获取val()。尝试这个：
$("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');
}
});
});
回答by kolunar
Use jQuery multiple-selectorif the only difference between the two functions is the value of the button being triggered.
如果两个函数之间的唯一区别是被触发的按钮的值，则使用jQuery 多选择器。
$("#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');
}
});
});
回答by Alankar More
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/');
});
});
- created as separate function for sending the ajax request.
- Kept second parameter as URL because in future you want to send data to different URL
- 创建为用于发送 ajax 请求的单独函数。
- 将第二个参数保留为 URL，因为将来您希望将数据发送到不同的 URL
