将分页数据传递给页面

Question

我有一个页面，我正在尝试让 AJAX 缩略图替换和分页工作。页面加载初始拇指：http://www.partiproductions.com/vault_test/1-a-b.php 但是当点击导航按钮时，它应该会改变缩略图，但不会。

我的点击功能（前进按钮）：

$('#gort').mouseup (function() {
  var curpg = parseInt($('.thumbwrap').attr('data-cpg'),10);
  console.log('Cur Pg: ' + curpg);
  var newpg = curpg + 1;
  console.log('New Pg: ' + newpg);
  var $totpgs = parseInt($('.thumbwrap').attr('data-tpgs'),10);
  console.log('Total Pages: ' + $totpgs);
  if (newpg > 1) {$('#goleft').show(200)}
  if (newpg == $totpgs) {newpg = $totpgs; $('#gort').hide()}   // limit page to total pages
  if (newpg < $totpgs) {$('#gort').show(200)}
  $('.thumbwrap').attr('data-cpg', newpg);
  var $start = (newpg - 1) * 15;
  console.log('Start: ' + $start);
  // my attempt to pass $start to pagination.php
  $.ajax({
    url:'pagination.php',
    type:'POST',
    data:{start:$start},
    dataType:'JSON'
    success: function(response) {
      thumbparse(response);
    }
  });
});

目前简单的 thumbparse 函数：

 function thumbparse(response) {
   alert(response);
   console.log('Thumbparse output: ' + $navresults);
 }

分页.php：

<?php
$thumbst = $_POST['start'];  // capture input from AJAX
echo "Inside Pagination: $thumbst";
require_once 'meekrodb.2.2.class.php';
require_once 'dconnect.php';
// pull from database using specific page items
$navresults = DB::query("SELECT substr(theme, 1, 1) as Alphabet, theme, developer, thumb, thumb_lg FROM gallery ORDER BY (CASE Alphabet
  WHEN '1' THEN 1
  WHEN '2' THEN 2
  WHEN '3' THEN 3  
  WHEN 'A' THEN 4
  WHEN 'B' THEN 5
  ELSE 6
  END), theme
  LIMIT $thumbst,15");
if(isset($_POST['start']) && !empty($_POST['start'])) {    
  echo json_encode($navresults);
}  
// my attempt to loop through assigned variables that are echoed in main pg   
$x = 0;
foreach ($navresults as $row) {
  $x++;
  if ($x == 1) {
    $t1 = $row['theme'];
    $d1 = $row['developer'];
    $th1 = $row['thumb'];
    $thlg1 = $row['thumb_lg'];
  }
  ... other x's
}

我没有看到 pagination.php 的回声 我如何将新的拇指数据 ($navresults) 传回主页并将该数据放入 DOM？请编码，因为我刚刚学习 - 谢谢。

更新 1：

function thumbparse(response) {
  alert(response);
  var obj = JSON.parse(response);
  alert(obj.count);
  console.log('Thumbparse results: ' + $navresults);
}

更新 2：

function thumbparse(response) {
  alert(response);
  console.log(response);
  var x = 0;
  var obj = response;
  $.each(obj, function(key, val) {
    x++;
    var y = x - 1;
    $('ul.thumbwrap .thumb:nth-of-type(y) img').attr({
      alt: obj.theme,
      src: obj.thumb,
      'data-retina': obj.thumb_lg
    });
    $('ul.thumbwrap .thumb:nth-of-type(y) p.hname').text(obj.theme);
    $('ul.thumbwrap .thumb:nth-of-type(y) p.hdev').text(obj.developer);
  });
}

更新 3：

function thumbparse(response) {
  alert(response);
  console.log(response);
  var x = 0;
  var obj = response;
  $.each(obj, function(key, val) {
    x++;
    var y = x - 1;
    console.log('Exist. src: ' + $('.thumb').eq(y).find('img').attr('src')); // correct
    console.log('New src: ' + obj.thumb);  // undefined
    $('.thumb').eq(y).find('img').attr({
      alt: obj.theme,
      src: obj.thumb,
      'data-retina': obj.thumb_lg
    });
    $('.thumb').eq(y).find('p.hname').text(obj.theme);
    $('.thumb').eq(y).find('p.hdev').text(obj.developer);
  });
}

更新 4：

function thumbparse(response) {
  alert(response);
  console.log(response);
  var x = 0;
  var obj = response;
  $.each(obj, function(key, val) {
    x++;
    var y = x - 1;
    console.log('Exist. src: ' + $('.thumb').eq(y).find('img').attr('src'));
    console.log('New src: ' + obj[key].thumb);
    $('.thumb').eq(y).find('img').attr({
      alt: obj[key].theme,
      src: obj[key].thumb,
      'data-retina': obj[key].thumb_lg
    });
    $('.thumb').eq(y).find('p.hname').text(obj[key].theme);
    $('.thumb').eq(y).find('p.hdev').text(obj[key].developer);
    if (obj[key].theme == '') {$('.thumb').eq(y).hide()}
  });
}

Answer 1

试试这个：

function thumbparse(response) {
 console.log(response);
  var x = 0;
  var obj = response;
 $.each(obj, function(key, val) {
 x++;
var y = x - 1;
console.log('Exist. src: ' + $('.thumb').eq(y).find('img').attr('src'));//Actual src
console.log('New src: ' + obj[key].thumb); //new src from json response
$('.thumb').eq(y).find('img').attr({
  alt: obj[key].theme,
  src: obj[key].thumb,
  'data-retina': obj[key].thumb_lg
});
$('.thumb').eq(y).find('p.hname').text(obj[key].theme);
$('.thumb').eq(y).find('p.hdev').text(obj[key].developer);
if (obj[key].theme == '') {$('.thumb').eq(y).hide()}
 });
}