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