如何使用 JQuery 处理表单中的多个提交按钮？

Question

我需要创建 30 个按钮，从 1 到 30，每个按钮都调用完全相同的动作脚本（例如，都在同一个表单下），其中传递给动作脚本的参数只是按下的按钮的编号(1 到 30)。

例如，假设action脚本是process.php，如果按下按钮3，那么我需要从process.php?btn=3拉取数据，如果按下按钮27，那么我需要拉取数据形成 process.php?btn=27.

使用 JQuery 最简单、最直接的方法是什么？

谢谢！

Answer 1

这样的事情应该可以做到。 beforeSend 函数只是向您显示正在发送到服务器的内容。

$('button').click(function (e) {
    e.preventDefault();
    var number = $('form button').index(this);
    $.ajax('process.php', {
        data: 'number='+ number,
        beforeSend: function (jqHxR, settings) {
            alert(settings.data);
            return false;
        }
    });  
});

编辑： http://jsfiddle.net/EvilAmarant7x/NhMnP/

Answer 2

假设您将所有链接都提供给 .number 类：

$("a.number").click(function(e) {
    e.preventDefault();
    window.location.href = 'process.php?btn=' + $(this).text();
});

<a class="number" href="#">1</a>
<a class="number" href="#">2</a>
...

这似乎是最好在服务器端完成的类型，例如让服务器使用正确的参数值渲染每个href。我假设这不是你的选择。

编辑：按要求异步：

$("a.number").click(function(e) {
    e.preventDefault();

    // fill up div with ID="results" with content from server
    $("#results").load("process.php", { btn: $(this).text() }, function() {

        // callback to do something once the content has loaded
        // (perhaps not needed)

    });
});

<div id="results"></div>
...
<a class="number" href="#">1</a>
<a class="number" href="#">2</a>
...

请参阅 $.load 和 $.ajax。