javascript - 根据单击哪个按钮获取表单内的输入值

我有以下表格：

<div>
  <form name="ajaxformname" id="ajaxform" action="/request" method="POST">
    AJAX:
    <input id="btn1" name="feeling" type="submit" value="Fine">
    <input id="btn2" name="feeling" type="submit" value="Neutral">
    <input id="btn3" name="feeling" type="submit" value="Bad">
  </form>
</div>

应该通过ajax发布到服务器。

这是相关的javascript：

$('#ajaxform').submit(function (event) {
    event.preventDefault();
        var form = $(this);
        var action = form.attr("action"),
            method = form.attr("method"),
            data = form.attr("value");

    $.ajax({
        url: "/request",
        type: method,
        data: data
    });

现在-根据单击的三个按钮中的哪个-我希望将其值发布到服务器。但是form.attr("value")只是给我表单的值，而不是输入字段的值。

有什么建议么？一种解决方案是创建不同的表单，但这似乎不是DRY ...

最佳答案

首先，如果要使用表单的action属性，则应在ajax请求的url参数中引用它：

url: form.attr('action'),

现在，对于单击的按钮，您应该使用此方法（这是一种解决方法，因为提交按钮不包含在序列化表单中，如果没有，我会改用它）：

$(function () {

    //When any of the buttons is clicked, we store in the form data the clicked button value
    $('#ajaxform').on('click', 'input[type=submit][name=feeling]', function(e) {

        $(this.form).data('clicked', this.value);
    });

    $('#ajaxform').submit(function (event) {

        event.preventDefault();

        var form = $(this);

        $.ajax({
            url: form.attr('action'),
            type: form.attr("method"),
            data: { clickedButton : form.data('clicked') } //Retrieve the button clicked value from the form data
        });
    });
});

这里是工作示例：https://jsfiddle.net/68qLxLgm/1/