我需要创建一个带有 30 个按钮的 jQuery 应用程序，从 1 到 30，每个按钮通过 Ajax 调用完全相同的动作脚本，其中传递给动作脚本的参数只是按下的按钮的数量（1到 30)。
例如，假设动作脚本是process.php，如果按下按钮3，则需要从process.php?btn=3拉取数据，如果按下按钮27，则需要从process.php?btn=27拉取数据.
我应该使用哪种类型的按钮：<input> 按钮、<a> 按钮、<button> 按钮或其他？你为什么这么建议？
另外，Ajax 将如何获取按您建议的方法按下的按钮的相应值（1-30）？
谢谢！
【问题讨论】：
我建议使用<a/>，这样如果 JavaScript 被禁用，您可以维护应用程序的功能。
<a href="process.php?btn=3" class="actionButton">Button 3</a>
脚本会简单地使用href 发布到您的页面。
$("a.actionButton").click(function(e){
e.preventDefault();
$.post(this.href, {}, function(data){
//do something with the data.
});
});
更新
由于需要 JavaScript，因此我的建议取决于您的应用程序设计。如果你想让大按钮看起来像按钮，只需使用<input type="button" value="3"/> 默认情况下，它们将具有悬停效果，开箱即用的压抑效果。
如果您的按钮看起来不像普通按钮，可能只是块或其他样式，<div/> 也可能是一个选项。使用<a/> 的一个缺点是您总是必须抑制click() 的默认行为
【讨论】：
每个都可以正常工作。但是<a> 可以使用图像设置样式，而<input> 和<button> 则不能（浏览器决定外观）。
只需在按钮上绑定点击事件。假设你有这个 HTML：
<a href="/process?button=1">Button 1</a>
<a href="/process?button=2">Button 2</a>
...
<a href="/process?button=3">Button 3</a>
这里是 Javascript。诀窍是在此处调用 AJAX，并返回 false 以防止浏览器更改页面。
$('a').click(function(e) { $.get($(this).attr('href'), function(result) { alert('AJAX 结果 = '+结果); }); 返回假； });【讨论】：
您可以在每个按钮上创建一个自定义属性。
<input type="button" onclick="YourCallbackMethod(this)" buttonNumber="1" value="Button 1" />
在你的 javascript 中
function YourCallbackMethod(button)
{
var number = $(button).attr("buttonNumber");
// Call the ajax method with the number value.
}
通过这样做，您可以添加额外的属性来扩展存储在每个按钮中的数据，并且由于它是集中式的，而不是分散在多个锚标记周围，它还使得更改 AJAX 目标链接非常容易。
【讨论】：
作为 Marks 答案的替代方案，您可以使用 <form> 元素，并为每个按钮设置一个 submit 按钮； input 或 button。将元素的名称设置为“btn”，将元素的值设置为按钮编号。
<form id="foo" action="process.php" method="<!-- POST or GET? -->">
<button type="submit" name="btn" value="1">Button 1</button>
</form>
jQuery 看起来像：
jQuery(document).ready(function ($) {
$('#foo').bind('submit', function (evt) {
jQuery.ajax({
url: this.action,
data: $(this).serialize(),
success: function () {
// whatever
}
});
evt.preventDefault();
});
});
如果您希望提交是 POST 请求，这很可能会更好。然而，对于 GET 请求，标记可能会更容易。
【讨论】：