Question

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

问题在于我不确定我是否理解ajax部分的确切工作方式以及如何“提供”类别ID。

这是索引页面的链接

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

这是test.php

<head>
<script type="text/javascript">
$(document).ready(function() {

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

   $(".main-post").on("click",".get_pic", function(e){
       var image_id = $(this).attr('data-id');
     $(".main-post").html("<div style=\"margin:50px auto;width:50px;\"><img src=\"loader.gif\" /></div>");
     $.post( "getpicture.php", {  img_category: 1 }, function( data ) {
     $(".main-post").html( data );
   });
   return false;
   });

});
</script>
</head>
<body>
   <article class="main-post">
     // HERE THE IMAGE IS LOADED
   </article>
</body>

这是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>';    
}

很明显，我是这个领域的新人，仍在学习但却无法理解。

现在我点击ID=431 test.php上的id=1图片从数据库image_id image_name image_type image_size image_alt image_path img_category第一行加载，当我点击下一个按钮时没有改变任何东西..只是刷新图像这是最新的。

更新：图像表结构

category_id
category_name

image_category表

{
"images": ["ssheet.png"],
"frames": [
    [0, 0, 256, 192],
    [0, 194, 256, 192],
    [258, 0, 256, 192],
    [258, 194, 256, 192]],
"framerate": "24",
"dscaled": "0.4"
}

Answer 1

首先，您已经定义了 var image_id = $（this）.attr（＆＃39; data-id＆＃39;）; 并且从未使用过，您必须将此image_id传递给您ajax post。

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

第二个 $ current_picture 值并不依赖于$ _POST [img_category]，它总是具有相同的值，在这种情况下1它取决于$ _POST [ ＆＃34; image_id＆＃34;]

$current_picture = $_POST["imageId"];
$currentCategory = $_POST["img_category"];
$result = $mysqli->query("SELECT image_id FROM images WHERE image_id > $current_picture and image_category=$currentCategory ORDER BY image_id ASC LIMIT 1")->fetch_object();

等等，对于您的下一个查询，请注意您的数据库表中必须有 image_category 字段

这个脚本是一个很好的学习开始，考虑使用firebug add on for firefox或开发者控制台已经安装了chrome来轻松跟踪ajax请求

Answer 2

您总是发送相同的＆＃39; img_category＆＃39;值。那是错误的。试着用这个：

<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>

了解ajax图库和类别

2 个答案: