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

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

Answer 2

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

＆＃13;

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

＆＃13;

然后你可以用你想要的w替换警报。

Answer 3

尽管可能很明显，但是当Ajax请求成功时，你没有任何东西（状态== 200）。

首先，您应该查看this文档，了解jquery＆＃39; boolean activityExists = intent.resolveActivityInfo(getPackageManager(), 0) != null;方法的工作原理，同时参考以下链接：

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

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

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

在没有页面刷新的情况下制作Ajax和PHP更新页面？

3 个答案: