如何从带有 2 个按钮的表单单击按钮时发送 Ajax 请求?
Posted
技术标签:
【中文标题】如何从带有 2 个按钮的表单单击按钮时发送 Ajax 请求?【英文标题】:How can I send an Ajax Request on button click from a form with 2 buttons? 【发布时间】:2016-05-14 04:23:25 【问题描述】:我想从一个有 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');
);
);
);
如何改进这段代码并将其合并到一个函数中?
【问题讨论】:
【参考方案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');
);
);
【讨论】:
是的,谢谢我是 *** 的新手——目前正在努力解决问题! :) 这行得通。但我试图从我返回的 json 数据中挑选出name
,但我得到了未定义。我这样映射alert(result.name)
答案完全取决于 JSON 的结构。我建议为它提出一个新问题【参考方案2】:
如果两个函数之间的唯一区别是被触发按钮的值,请使用jQuery multiple-selector。
$("#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');
);
);
【讨论】:
谢谢,试一试! :)【参考方案3】: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/');
);
);
-
创建为用于发送 ajax 请求的单独函数。
将第二个参数保留为 URL,因为将来您希望将数据发送到不同的 URL
【讨论】:
以上是关于如何从带有 2 个按钮的表单单击按钮时发送 Ajax 请求?的主要内容,如果未能解决你的问题,请参考以下文章