javascript - 使用ajax发送$_POST变量到php

Question

我有一个带有 2 个提交按钮的表单:

<form id="drinksForm" action="drinksHandler.php" method="POST"> 
    <label for="drinks">Number of drinks</label> 
    <input type="number" class="form-control" name="drinks" min="1" max="30" required="required">
    <input type="submit" name="buttonDrinks" class="btn btn-success" value="Got drinks">
    <input type="submit" name="buttonDrinks" class="btn btn-danger" value="Didn't get drinks">
</form>

我使用ajax打印即时反馈消息:

$('#drinksForm').submit(function(event){
    event.preventDefault();
    var form = $('#drinksForm');
    $.ajax({
        type : 'POST',
        url : form.attr('action'),
        data : form.serialize(),
    })

    .done(function(data){
        $('#result').html(data);
    })
    .fail(function(data){
        $('#result').html(data);
    })

});

在 DrinkHander.php 中，我想查看按下了哪个按钮。如果我删除

event.preventDefault();

我可以看到

$_POST["buttonDrinks"]

按下了哪个按钮。但由于

event.preventDefault();
    $.ajax({
        type : 'POST',
        url : form.attr('action'),
        data : form.serialize(),
    })

它不会发送按下哪个按钮的信息。那么我如何将一个变量发送到 DrinksHandler.php 以显示按下了哪个按钮。

Answer 1

删除按钮名称属性并在提交之前动态添加输入。 还将提交功能更改为单击按钮，以便 PreventDefault 应该起作用。 像这样的事情

$('body').on('click', '.btnSubmit', function(event){
    event.preventDefault();
    var form = $('#drinksForm');
    form.append('<input type="hidden" name="buttonDrinks" value="'+$(this).val()+'">');
    
    var formData = form.serialize();
    
    console.log(formData);

    $.ajax({
        type : 'POST',
        url : form.attr('action'),
        data : formData,
    })

    .done(function(data){
        $('#result').html(data);
    })
    .fail(function(data){
        $('#result').html(data);
    })

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="drinksForm" action="drinksHandler.php" method="POST"> 
    <label for="drinks">Number of drinks</label> 
    <input type="number" class="form-control" name="drinks" min="1" max="30" required="required">
    <input type="submit" class="btn btn-success btnSubmit" value="Got drinks">
    <input type="submit" class="btn btn-danger btnSubmit" value="Didn't get drinks">
</form>