使Ajax和PHP在不刷新页面的情况下更新页面

Make Ajax and PHP update page without page refresh?

本文关键字：情况下 更新 刷新 Ajax PHP      更新时间：2023-09-26

每当我提交"添加账单"表单时，在刷新页面之前不会发生任何事情。那是我在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);

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
    }
});

页面不会自动知道应该如何更新。你必须在该函数中编写代码才能做到这一点。可能是通过识别一些页面元素并修改其内容、添加/删除其他页面元素等。

您并没有告诉它在ajax返回后做任何事情。用这个替换您的.ajax调用。

$.post( "index.php", { action: "add bill", time: "2pm" })
  .done(function( data ) {
    alert( "Data Loaded: " + data );
  });

然后，您可以将警报替换为您试图执行的操作。

很明显，当Ajax请求成功时（状态==200），您没有任何准备。

首先，您应该查看此文档，了解jquery的ajax方法是如何工作的，也可以参考以下链接：

http://www.sitepoint.com/use-jquerys-ajax-function/

http://www.w3schools.com/jquery/ajax_ajax.asp

一旦jquery.ajax方法成功或完成执行，您必须指定需要做什么。主要是，您必须指定在执行相同方法结束时需要对获得的数据做什么，通常您会将获得的数据显示到同一页面中的指定部分，或者构建整个页面以反映使用ajax所做的更改。

相关文章：