我正在构建一个简单的预算应用程序,我正试图根据下拉菜单筛选一个结果表,其中包含一年中的月份。当页面加载时,它会启动一个php函数,该函数可以获取当月的所有预算类别,并且运行良好。我想做的是能够从下拉菜单中选择不同的月份,然后只使用该月份的项目更新表格。
如何仅使用所选月份的数据更新表格
这是我的AJAX调用,它将成功地提醒经过过滤的结果数组,但这是我所知道的。我不知道如何获取AJAX响应并将其输入到表中。
function filterCategory() {
var cur_month = $('#month option:selected').attr("value");
$.ajax({
type: "POST",
url: 'inc/functions.php',
data: {action: "filter_categories", cur_month:cur_month},
success: function(response){
alert(response);
}
});
};
以下是我的PHP函数,用于获取收入和支出类别的初始列表:
function get_income_cat() {
require(ROOT_PATH . "inc/database.php");
$cur_month = date('m');
try {
$results = $db->query("SELECT * FROM categories WHERE is_income = '1' AND month ='" . $cur_month . "' ORDER BY cat_name ASC;");
} catch (Exception $e) {
echo ("ERROR: Data could not be retrieved from the database." . $e);
exit;
}
$income = $results->fetchall(PDO::FETCH_ASSOC);
return $income;
};
function get_expense_cat() {
require(ROOT_PATH . "inc/database.php");
$cur_month = date('m');
try {
$results = $db->query("SELECT * FROM categories WHERE is_income = '0' AND
month ='" . $cur_month . "' ORDER BY cat_name ASC;");
} catch (Exception $e) {
echo ("ERROR: Data could not be retrieved from the database." . $e);
exit;
}
$expense = $results->fetchall(PDO::FETCH_ASSOC);
return $expense;
};
这是我的主要php/html代码:
<?php foreach($income as $key=>$value) { ?>
<tr>
<td id="<?php echo $value['cat_id_PK']; ?>"><?php echo $value['cat_name']; ?></td>
<td id="<?php echo $value['cat_id_PK']; ?>">$<?php echo $value['cat_amount']; ?></td>
</tr>
<?php }; ?>
<?php foreach($expense as $key=>$value) { ?>
<tr>
<td id="<?php echo $value['cat_id_PK']; ?>"><?php echo $value['cat_name']; ?></td>
<td id="<?php echo $value['cat_id_PK']; ?>">$<?php echo $value['cat_amount']; ?></td>
</tr>
<?php }; ?>
您收到响应通知了吗?在提供的代码中,我看不到函数filterCategory()
被调用。我假设您正在使用onchange事件来启动AJAX调用。
在成功功能中,您必须接受响应,而不是提醒它,您必须将它放在文档中,如下所示:
$('#the_target').html(response);
我建议使用类似JSON的东西来为AJAX请求编码PHP数据(请参阅PHP:JSON_encode。然后它就变成了一个相当琐碎的操作。你可以在这个jsfiddle中看到这个概念的基本内容,尽管我甚至不会假装我在那里使用任何最佳实践-这只是一个非常粗略的草图。
$('#load').click(function() {
$.get('http://examples.joeysmith.com/gistfile3.txt',
function(data) {
var table = $('#table tr:last');
table.html('');
console.log(table);
var json = JSON.parse(data);
for(var recType in json) {
for(var rec in json[recType]) {
td = json[recType][rec];
table.after('<tr>'
+'<td id="'+td.cat_id_PK+'">'+td.cat_name+'</td>'
+'<td>'+td.cat_amount+'</td>'
+'</tr>');
}
}
}
)
});