尝试将查询结果显示在同一页面上

Try to display the query result to display on the same page

本文关键字：一页 显示 查询 结果      更新时间：2023-09-26

我又需要帮助了…我试图列出的主要类别列表，除了每个类别，有一个视图按钮，看到它的子和显示在同一页面内。下面是我的代码:

<table width="100%" align="center" style="margin-top:20px;">
<tr><td align="center"><font size="6">Categories</font></td></tr></table>
<?php
$sql = mysql_query("Select * FROM categories WHERE top_cat_id = 0")
?>
<div id="mainCat">
<form method="POST" id="viewSub" action="">
<table width="100%" align="center" class="categories">
<tr><td colspan="3" style="background-color:#000; color:#FFF; font-size:16px;">Main Categories</td></tr>
<tr><td align="center" width="10%" style="font-size:14px; font-weight:bold;">ID</td>
<td align="center" style="font-size:14px; font-weight:bold;">Categorie Name</td>
<td align="center" width="30%" style="font-size:14px; font-weight:bold;">Subcategories</td></tr>
<?php
while($data = mysql_fetch_array($sql))
{
    echo '<tr><input type="hidden" name="cat_id" id="cat_id" value="'.$data['cat_id'].'"><td align="center">'.$data['cat_id'].'</td>';
    echo '<td align="center">'.ucwords(strtolower($data['cat_name'])).'</td>';
    echo '<td align="center"><input type="submit" name="submit" value="View" /></td></tr>';
}
?>
</table></form>
</div>
<script type="text/javascript">
$(function() {
    $("#viewSub").bind('submit',function() {
        var cat_id = $('#cat_id').val();
        $.post('subcategories.php',{cat_id:cat_id}, function(data){
        $("#subCat").html(data);
        });
        return false;
    });
);
</script>
<div id="subCat">
</div>

如您所见，我猜jQuery函数只监听第一个View按钮，因为无论我点击哪个按钮，它只返回第一个主类别的子类别。有什么办法能让它成功吗?比如使用onclick操作?我不擅长javascript，所以我需要帮助，让这个工作…

谢谢。

下面是一个工作代码:

<table width="100%" align="center" style="margin-top:20px;">
<tr><td align="center"><font size="6">Categories</font></td></tr></table>
<?php
$sql = mysql_query("Select * FROM categories WHERE top_cat_id = 0");
?>
<div id="mainCat">
<!--<form method="POST" id="viewSub" action="">-->
<table width="100%" align="center" class="categories">
<tr><td colspan="3" style="background-color:#000; color:#FFF; font-size:16px;">Main Categories</td></tr>
<tr><td align="center" width="10%" style="font-size:14px; font-weight:bold;">ID</td>
<td align="center" style="font-size:14px; font-weight:bold;">Categorie Name</td>
<td align="center" width="30%" style="font-size:14px; font-weight:bold;">Subcategories</td></tr>
<?php
while($data = mysql_fetch_array($sql))
{
    echo '<tr><input type="hidden" class="cat_id_'.$data['cat_id'].'" value="'.$data['cat_id'].'"><td align="center">'.$data['cat_id'].'</td>';
    echo '<td align="center">'.ucwords(strtolower($data['cat_name'])).'</td>';
    echo '<td align="center"><input type="button" class="viewData" name="'.$data['cat_id'].'" value="View" /></td></tr>';
}
?>
</table><!--</form>-->
</div>
<script type="text/javascript">
$(document).ready(function(){
    $(".viewData").click(function(){
        var cat_id = $(".cat_id_"+$(this).attr("name")).val();
       $.post('subcategories.php',{cat_id:cat_id}, function(data){
        $("#subCat").html(data);
        });
        return false;
    });
});
</script>
<div id="subCat">
</div>

我假设你的AJAX请求工作正常。

注:进一步为SQL查询使用准备语句。因为这个代码不安全

相关文章：