0

我想使用带有 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 函数但没有成功，我已经看到了调用单独文件的示例，但在我的情况下，我需要将上述代码放在同一个文件中。

有人能帮我吗？

谢谢

4

2 回答 2

1

我认为您应该将代码拆分为两个文件。第一个“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>

带有 php 的第二个“result.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 的元素；）

于 2013-06-14T13:53:17.073 回答
0

您应该为 jQuery 使用AjaxForm插件：

$('.my-ajax-form').ajaxForm(function(data){
    alert(data);
    // do some thing with data here.
})
于 2013-06-14T13:13:52.617 回答