Php 了解ajax库和类别

我正在尝试使用ajax/php/mysql制作基于类别的图库。在索引页上加载了一堆图像。他们有指向页面的href链接，用户只能在该页面上看到该类别中的选定图像。现在我想为“下一个”和“上一个”链接创建两个按钮，这样用户就可以从该类别导航到下一个图像

问题是，我不确定我是否理解ajax部分到底是如何工作的，以及如何“给出”类别ID

这是来自索引页的链接

<a href="test.php?image_id='.$row['image_id'].'"></a>

这是getpicture.php中的源代码

//get pic id from ajax request
if(isset($_POST["img_category"]) && is_numeric($_POST["img_category"]))
{
    $current_picture = filter_var($_POST["img_category"], FILTER_SANITIZE_NUMBER_INT);
}else{
    $current_picture=1;
}
//Connect to Database
$mysqli = new mysqli($hostname, $username, $password, $databasename);

if ($mysqli->connect_error){  
    die('Error : ('. $mysqli->connect_errno .') '. $mysqli->connect_error);
}

//get next picture id
$result = $mysqli->query("SELECT image_id FROM images WHERE image_id > $current_picture ORDER BY image_id ASC LIMIT 1")->fetch_object();

if($result){
   $next_id = $result->image_id;
}

//get previous picture id
$result = $mysqli->query("SELECT image_id FROM images WHERE image_id < $current_picture ORDER BY image_id DESC LIMIT 1")->fetch_object();
if($result){
   $prev_id = $result->image_id;
}

//get details of current from database
$result = $mysqli->query("SELECT image_name, image_title, image_hits FROM images WHERE img_category =  $current_picture LIMIT 1")->fetch_object();
if($result){

  //construct next/previous button
  $prev_button = (isset($prev_id) && $prev_id>0)?'<a href="#" data-id="'.$prev_id.'" class="get_pic"><img src="prev.png" border="0" /></a>':'';
  $next_button = (isset($next_id) && $next_id>0)?'<a href="#" data-id="'.$next_id.'" class="get_pic"><img src="next.png" border="0" /></a>':'';

//output html
echo '
      <h1><a href="#">'.$result->image_title.'</a></h1>
        <div class="pull-right">
         '.$prev_button.'
         '.$next_button.'
        </div>
        <div class="article-content">
           <img  src="upload/'.$result->image_name.'" alt=""/>            
        </div>';    
}    

图像类别表

category_id
category_name

---

首先定义了var image_id=$（this.attr（'data-id'）而且从未使用过，您必须将此图像id传递给您的ajax帖子

$.post( "getpicture.php", {  img_category: 1, imageId: image_id }, function( data ) {
     $(".main-post").html( data );
   });

其次，$current\u picture值不取决于始终具有相同值的$\u POST[img\u category]，在本例中，1取决于$\u POST[“image\u id”]

依此类推，对于下一个查询，请小心，您的数据库表中必须有一个image\u category字段

---

此脚本是学习的好开始，考虑使用Firebug附加程序来为Firefox或开发控制台已经安装的Chrome来跟踪Ajax请求

< p>首先，您定义了<强> VaR图像Id= $（this）。strong>而且从未使用过，您必须将此图像id传递给您的ajax帖子

$.post( "getpicture.php", {  img_category: 1, imageId: image_id }, function( data ) {
     $(".main-post").html( data );
   });

其次，$current\u picture值不取决于始终具有相同值的$\u POST[img\u category]，在本例中，1取决于$\u POST[“image\u id”]

依此类推，对于下一个查询，请小心，您的数据库表中必须有一个image\u category字段

---

此脚本是一个很好的学习起点，考虑使用Firebug添加到Firefox或开发控制台已经安装的Chrome，以便追踪Ajax请求

< p>您总是发送相同的“imgl类别”值。这是个错误。尝试使用以下方法：

<script type="text/javascript">
    $(document).ready(function() {
        var imageUrl = 'getpicture.php';
        var $mainPost = $(".main-post");

        var showLoader = function () {
            $mainPost.html("<div style=\"margin:50px auto;width:50px;\"><img src=\"loader.gif\" /></div>");
        };

        var getImage = function (id) {                
            var data = {
                img_category: (typeof id !== 'undefined') ? id : 1
            };

            showLoader();
            $.post(imageUrl, data, function( data ) {
                $mainPost.html(data);
            });
        };

        getImage();

        $mainPost.on("click", ".get_pic", function(e){
            e.preventDefault();
            getImage($(this).attr('data-id'));
            return false;
        });
    });
</script>

$（文档）.ready（函数（）{
var imageUrl='getpicture.php'；
变量$mainPost=$（“.mainPost”）；
var showLoader=函数（）{
$mainPost.html（“”）；
};
var getImage=函数（id）{
风险值数据={
img_类别：（id类型！=“未定义”）？id:1
};
showLoader（）；
$.post（图像URL、数据、函数（数据）{
$mainPost.html（数据）；
});
};
getImage（）；
$mainPost.on（“点击”、“.get_pic”，函数（e）{
e、 预防默认值（）；
getImage（$（this.attr（'data-id'））；
返回false；
});
});

您总是发送相同的“img\U类别”值。这是个错误。尝试使用以下方法：

<script type="text/javascript">
    $(document).ready(function() {
        var imageUrl = 'getpicture.php';
        var $mainPost = $(".main-post");

        var showLoader = function () {
            $mainPost.html("<div style=\"margin:50px auto;width:50px;\"><img src=\"loader.gif\" /></div>");
        };

        var getImage = function (id) {                
            var data = {
                img_category: (typeof id !== 'undefined') ? id : 1
            };

            showLoader();
            $.post(imageUrl, data, function( data ) {
                $mainPost.html(data);
            });
        };

        getImage();

        $mainPost.on("click", ".get_pic", function(e){
            e.preventDefault();
            getImage($(this).attr('data-id'));
            return false;
        });
    });
</script>

$（文档）.ready（函数（）{
var imageUrl='getpicture.php'；
变量$mainPost=$（“.mainPost”）；
var showLoader=函数（）{
$mainPost.html（“”）；
};
var getImage=函数（id）{
风险值数据={
img_类别：（id类型！=“未定义”）？id:1
};
showLoader（）；
$.post（图像URL、数据、函数（数据）{
$mainPost.html（数据）；
});
};
getImage（）；
$mainPost.on（“点击”、“.get_pic”，函数（e）{
e、 预防默认值（）；
getImage（$（this.attr（'data-id'））；
返回false；
});
});

谢谢您的回答。我仍然不明白ajax和getpicture.php如何知道类别是什么？可能有一些错误，我没有测试这段代码，对于第一条评论，您必须向图像添加另一个属性，就像您对图像id数据category=“$result->category\u id”所做的那样。谢谢您的回答。我仍然不明白ajax和getpicture.php如何知道类别是什么？可能有一些错误，我没有测试这段代码，对于第一个注释，您必须向图像添加另一个属性，就像您对图像id数据category=“$result->category\u id”所做的那样。这样，将再次从数据库中加载1个id。当单击“下一步”按钮显示下一幅图像时，如果再次单击“下一步”按钮，则显示空白页。您能否提供

图像

表格结构？谢谢。这样，将再次从数据库中加载1个id。当单击“下一步”按钮显示下一个图像时，如果“下一步”按钮第二次显示空白页，您能否提供

图像

表格结构？

<script type="text/javascript">
    $(document).ready(function() {
        var imageUrl = 'getpicture.php';
        var $mainPost = $(".main-post");

        var showLoader = function () {
            $mainPost.html("<div style=\"margin:50px auto;width:50px;\"><img src=\"loader.gif\" /></div>");
        };

        var getImage = function (id) {                
            var data = {
                img_category: (typeof id !== 'undefined') ? id : 1
            };

            showLoader();
            $.post(imageUrl, data, function( data ) {
                $mainPost.html(data);
            });
        };

        getImage();

        $mainPost.on("click", ".get_pic", function(e){
            e.preventDefault();
            getImage($(this).attr('data-id'));
            return false;
        });
    });
</script>