Question

我需要创建一个带有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）？

谢谢！

Answer 1

如果禁用JavaScript，我建议使用<a/>，以维护应用程序的功能。

<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()的默认行为

Answer 2

每个都可以正常工作。但<a>您可以使用图片设置样式，而<input>和<button>则不能（浏览器决定外观）。

只需在按钮上绑定click事件即可。假设你有这个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 result = '+result);
    });
    return false;
});

Answer 3

您可以在每个按钮上创建自定义属性。

<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目标链接变得非常容易，因为它是集中的，而不是分布在多个锚标记周围。

Answer 4

作为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请求，Marks可能会更容易。

对于带有几个按钮的JQuery应用程序，我应该使用<input />按钮，<a> buttons, <button> buttons, or something else?</button></a>

4 个答案: