javascript - 无需页面刷新即可制作 Ajax 和 PHP 更新页面？

Question

每当我提交“添加账单”表单时，在我刷新页面之前什么都没有发生。那是我在 Twig 循环中看到我的新项目的时候。当我点击删除链接时，同样的问题发生了。在我刷新页面之前，没有任何内容(在视觉上)被删除。

如何在不刷新页面的情况下立即在页面上执行这些操作？我认为这可能与我的 PHP 或 SQL 有关？

JavaScript:

$(document).ready(function() {
    $(".addBill").on("click", function() {
        var billAmount = $('.billAmount').val();
        var billName = $('.billName').val();
        $.ajax({
            type: "POST",
            url: "index.php",
            data: { 
                bill_amount: billAmount, 
                bill_name: billName,
                action: 'addBill'
            }
        });
        return false;
    });

    $(".removeBill").on("click", function() {
        var id = $(this).data('id');
        $.ajax({
            type: "POST",
            url: "index.php",
            data: { 
                id_to_delete: id, 
                action: 'removeBill' 
            }
        });
        return false;
    });
});

HTML:

<form method="post" name="addBillForm">
    <input type="text" placeholder="Enter bill name" name="billName" class="billName">
    <input type="text" placeholder="Enter bill amount" name="billAmount" class="billAmount">
    <input type="submit" value="Submit" name="addBillForm" class="addBill">
</form>

<br><br>
<h2>My Bills</h2>
{% for bill in bills %}
    <p>{{ bill.billName }} - {{ bill.billAmount }} - 
        <a href="#" class="removeBill" data-id="{{ bill.id }}">Remove</a>
    </p>
{% endfor %}

这是我的 PHP 文件:

<?php

require_once 'global.php';

if (@$_POST['action'] == 'addBill')
{
    $billName = $_POST['bill_name'];
    $billAmount = intval($_POST['bill_amount']);
    $stmt = $db->prepare("INSERT INTO bills (billName, billAmount) VALUES(?,?)");
    $stmt->bindParam(1, $billName);
    $stmt->bindParam(2, $billAmount);
    $stmt->execute();
}

if (@$_POST['action'] == 'removeBill')
{
    $id = intval($_POST['id_to_delete']);
    $stmt = $db->prepare("DELETE FROM bills WHERE id = ?");
    $stmt->bindValue(1, $id);  
    $stmt->execute();
}

$billResults = $db->query('SELECT * FROM bills');
$bills = $billResults->fetchAll(PDO::FETCH_ASSOC);

$twigContext = array(
    "bills" => $bills
);

echo $twig->render('base.html.twig', $twigContext);

Answer 1

在 AJAX 调用完成后，您实际上并未对页面执行任何操作。例如:

$.ajax({
    type: "POST",
    url: "index.php",
    data: { 
        bill_amount: billAmount, 
        bill_name: billName,
        action: 'addBill'
    },
    success: function (data) {
        // update the page somehow
    },
    error: function () {
        // there was an error, handle it here
    }
});

页面不会自动知道应该如何更新。您必须在该函数中编写代码才能执行此操作。可能通过识别一些页面元素并修改它们的内容，添加/删除其他页面元素等。