我想使用带有 html 按钮的 AJAX 从数据库中获取信息,而无需刷新浏览器。
我可以使用下面的代码通过 HTML 使其工作,但我想通过 Ajax 来完成。
我在同一个文件 example.html 中有以下代码;
<form action="?" method="get">
<input id="Button1" type="hidden" name="q" value="%U/%Y"/>
<input id="Button1" style="width: auto" type="button" value="Weekly stats">
</form>
<form action="?" method="get">
<input id="Button2" type="hidden" name="q" value="%M/%Y"/>
<input id="Button2" style="width: auto" type="submit" value="Monthly Stats">
</form>
<br>
<?php
//execute a mysql query to retrieve all the users from users table
//if query fails stop further execution and show mysql error
if ($_GET['q'] == '') {
$q = '%M/%Y';
}
else {
$q = $_GET['q'] ;
}
$query=mysql_query("SELECT DATE_FORMAT((post_date), '".$q."') 'Date',
SUM(balance) 'Balance'
FROM posts
GROUP BY Date
LIMIT 0, 25") or die(mysql_error());
//if we get any results we show them in table data
if(mysql_num_rows($query)>0):
?>
<table id="lastTips" class="main" cellspacing="0" width= "100%">
<thead>
<tr>
<th align="center">Date</th>
<th align="center">Balance</th>
</tr>
</thead>
<tbody>
<?php
//while we going through each row we display info
while($row=mysql_fetch_object($query)):?>
<tr>
<td align="center"><?php echo $row->Date;?></td>
<td align="center"><?php echo $row->Balance;?></td>
</tr>
<?php endwhile;?>
</tbody>
</table>
<?php
//if we can't get results we show information
else: ?>
<h3>No Results found.</h3>
<?php endif; ?>
我尝试了几个 jquery 函数但没有成功,我见过调用单独文件的示例,但就我而言,我需要将上述代码放在同一个文件中。
有人可以帮助我吗?
谢谢
最佳答案
我认为你应该将代码分成两个文件。 第一个“index.html”(带有 html/js ):
<
script type="text/javascript">
$('#btn-week').click(function(){
$.post("result.php", { date: "%U/%Y" }).done(function(data)
{
formatResponse(data);
}
);
});
$('#btn-month').click(function(){
$.post("result.php", { date: "%M/%Y" }).done(function(data)
{
formatResponse(data);
}
);
});
function formatResponse( values ){
var result = jQuery.parseJSON(data);//parse json response
var element = $("#lastTips tbody");
element.html('');//to clean previous result
for ( var i in result ){
element.append('<tr><td align="center">' + values.date + '</td><td align="center">' + values.balance + '</td></tr>');//append to table
}
}
</script>
<input id="btn-week" style="width: auto" type="button" value="Weekly stats">
<input id="btn-month" style="width: auto" type="submit" value="Monthly Stats">
<table id="lastTips" class="main" cellspacing="0" width= "100%">
<thead>
<tr>
<th align="center">Date</th>
<th align="center">Balance</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
第二个“result.php”与 php:
<?php
//execute a mysql query to retrieve all the users from users table
//if query fails stop further execution and show mysql error
if ($_POST['q'] == '') {
$q = '%M/%Y';
}
else {
$q = $_POST['q'] ;
}
$query=mysql_query("SELECT DATE_FORMAT((post_date), '".$q."') 'Date',
SUM(balance) 'Balance'
FROM posts
GROUP BY Date
LIMIT 0, 25") or die(mysql_error());
echo json_encode(mysql_fetch_array($query));
我没有测试过代码。 一个警告,html 文件不能有两个具有相同 id 的元素;)
关于php - 将 Ajax 与 PHP 和 MySQL 结合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17109208/