如何从带有2个按钮的表单上单击按钮发送Ajax请求？

大家好，抱歉这里有点通用的问题。 我是Ajax的新手，想要从一个页面向另一个页面发送请求，该表单有2个按钮。

 button 1 button 2 <input id="access_token" type="hidden" name="access_token" value="" />  

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

有没有人有任何建议我如何改进这个代码，并可能将其合并为一个函数或什么？

提前致谢！ 🙂

Answer 1

假设处理程序之间唯一的逻辑差异是单击按钮的值，您可以使用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'); } }); }); 

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. 创建为发送ajax请求的单独函数。
2. 将第二个参数保留为URL，因为将来您希望将数据发送到不同的URL

Answer 3

如果两个函数之间的唯一区别是被触发的按钮的值，则使用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'); } }); });