javascript - JQuery和AJax用于同一类的多个提交按钮而不刷新页面？

Question

这是我的第一篇文章，我可以在不刷新页面的情况下调用 PHP。但是我很难找到一种方法来概括多个按钮。

HTML

<form action="#" class="t" method="POST" id="p1">
    <label for="t1">text_1</label>
    <input type="text" id="t1" name="t1" value="<?= $t1='' ?>" />
    <input type="submit" class="button" id="b1" name="insert" value="submit">
</form>

<form action="#" class="t" method="POST" id="p2">
    <label for="t2">text_2</label>
    <input type="text" id="t2" name="t2" value="<?= $t2='' ?>" />
    <input type="submit" class="button" id="b2" name="select" value="submit">
</form>

我可以将第一个文本输入中的值发送到 PHP，但我不知道如何使用多个表单来执行此操作。

JavaScript

$(document).ready(function(){
    $('body').on('submit', '#p1', function(event) {
        event.preventDefault();
        var formData = $(this).serialize();
        $.ajax({
            type : 'POST',
            url : 'answers.php',
            data : formData,

            success : function(data) {
                alert(data);
                $('#p').text(data);
            }
        });
    });
});

PHP

    $tab1 = (isset($_POST['tab1'])) ? $_POST['tab1'] : null;
    $t1 = (isset($_POST['t1'])) ? $_POST['t1'] : null;
    echo $tab1;
    echo $t1;

标签： javascriptphpjqueryajax

Answer 1

我添加了一个代码片段。提交后，它将console.log所需输入值的值

$(document).ready(function(){
    $('body').on('submit', '.t', function(event) {
        event.preventDefault();
        var formData = $(this).serialize();
        console.log(formData);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" class="t" method="POST" id="p1">
        <label for="t1">text_1</label>
        <input type="text" id="t1" name="t1" value="1" />
        <input type="submit" class="button" id="b1" name="insert" value="submit">
    </form>
    
    <form action="#" class="t" method="POST" id="p1">
        <label for="t2">text_2</label>
        <input type="text" id="t2" name="t2" value="2" />
        <input type="submit" class="button" id="b2" name="select" value="submit">
    </form>