如何使用ajax做到这一点？

Question

嗨可能有人请向我解释如何使用ajax来完成此操作，因此不会刷新页面。我是一般使用ajax和jquery的新手，任何帮助和解释都会很棒。

这是我的PHP代码。

<div class="recentwork"> 
<div class="imgholderfloat"> 
<?php 
include 'process/connect.php'; 
$small_path = "/work/small/"; 
$large_path = "/work/large/"; 
$full_path = "/work/full/"; 


$per_page = 3; 
$pages_query = "SELECT id FROM projects"; 
$pages_result = mysqli_query($link, $pages_query); 
$pages = ceil(mysqli_num_rows($pages_result)/$per_page); 

if ($_GET['page'] > $pages) { 
    $page = 1; 
} else { 
$page = (isset($_GET['page'])) ? (int)$_GET['page'] : 1; 
} 
$start = ($page - 1) * $per_page; 



$query = " SELECT * FROM projects INNER JOIN orders ON orders.id = projects.order_id LIMIT $start, $per_page"; 
$result = mysqli_query($link , $query); 
$num_rows = mysqli_num_rows($result);        

while ($row = mysqli_fetch_assoc($result)){ 
echo '<div class="imgholder"><a href="'.$full_path.''. 
    $row['filename'].'"><img src="'.$small_path .''.$row['filename'].'" /></a><div class="largeimg"><a href="'.$full_path.''.$row['filename'].'"><img src="'.$large_path.''.$row['filename'].'" /></a></div> 
<div class="details"> 
<p><span class="red">Theme</span>: '.$row['theme'].'</p> 
<p><span class="red">Budget</span>: '.$row['budget'].'</p> 
<p><span class="red">Type</span>: '.$row['type'].'</p> 
<p><span class="red">Misc</span>: '.$row['misc'].'</p> 
</div> 
</div> 
'; 
} 
if ($pages > 1 && $page < $pages) { 
    echo '<span class="morebtn" ><a href="?page='. $page= $page + 1 .'" >MORE</a></span>'; 
} 
else { 
    echo '<span class="morebtn" ><a href="?page='. $page= $page - 1 .'" >BACK</a></span>'; 
} 
?> 

</div> 
</div> 

所以基本上它的一个简单的分页显示持有图片等从数据库中检索的div。我如何通过ajax发送特定的get语句，以便在不刷新页面的情况下更新下一组div。我一直在尝试，但无法弄清楚。

再次感谢。

好吧，这是尽我所能。我如何得到显示检索到的内容？我在互联网上看过，但有很多不同的方式来做这件事，我无法理解你为什么会以某种特定的方式做到这一点。

$("a#morebutton").click(function() { 
    e.preventDefault(); 
    $.ajax({ 
    type: "GET", 
    url: index.php+$('a#morebutton').attr('href') , 
}); 
e.preventDefault(); 
}); 

Answer 1

结合使用jQuery，您可以尝试沿着;

$("a#morebutton").click(function() { 
    var xhr = new XMLHttpRequest(); 
    var result_target=$('#imgholder'); 
    xhr.open("get", "index.php"+this.href, true); 
    xhr.onreadystatechange = function(){ 
     if (xhr.readyState == 4){ 
      if(xhr.status >= 200 && xhr.status < 300){ 
       $(result_target).html(xhr.responseText); 
      } 
     }   
    }; 
    xhr.send(null); 
}); 

那纯粹是从我的头顶，我用这个格式都是我自己XHR呼叫，可能需要一些调整，以让它运行，如你所愿。

Answer 2

从阅读你的代码，我想这是你想要什么：

$(".morebtn a").click(function(e) { 
    e.preventDefault(); 

    $.get("index.php"+$(this).attr("href"), function(result) { 
     $(".imgholderfloat").html(result); 
    }); 
} 

Answer 3

我觉得更有意义，表明后面怎么使用Ajax的GET请求来改变图像的概念。如何适应在代码中执行此操作是关于如何组织代码的问题，但它可以通过几种不同的方法完成。

下面我将演示一种方法，返回一个带有<img .../>的HTML片段，以替换当前图像并处理错误，第一个/最后一个/上一个/下一个问题等等。这是为了告诉你如何在抽象的情况下做可能;最终如何执行代码最终取决于您。请确保并阅读下面的代码中的评论，以解释我正在做什么。

要查看下面的动作，请参阅：http://jfcoder.com/test/getimages.php

注意：我不发送HTML的所有，直到我已经确定了片段之后。这使我可以用一个PHP脚本来处理这两个请求。但是，您可以使用两种不同的脚本来完成此操作。

<?php 

// My ad hoc array of images. You of course will be 
// generating this list from a database call. 

$images = array(
    'http://upload.wikimedia.org/wikipedia/commons/d/db/087882_cf786e35-by-Roger-May.jpg', 
    'http://upload.wikimedia.org/wikipedia/commons/6/6c/173865_d45f46f7-by-dave-challender.jpg', 
    'http://upload.wikimedia.org/wikipedia/commons/9/97/188798_e4bc708f-by-Stephen-McKay.jpg', 
    'http://upload.wikimedia.org/wikipedia/commons/c/c0/205765_f6ccbfdb-by-Stephen-G-Taylor.jpg' 
); 

// I use a switch to determine full html or just a 
// snippet to return. Note, it defaults to full. 

switch ($_GET['type']) { 
    case 'snippet': 
     $type = 'snippet'; 
     break; 
    default: 
     $type = 'full'; 
} 

// Determine the current, first, and last ids. 

$imgid = (int) $_GET['img']; 
$first = 0; 
$last = count($images) - 1; 

// If it's not real, reset to the beginning photo. 

if (!$images[$imgid]) { 
    $imgid = 0; 
} 

// Here I determine what the previous and last img ids 
// will be. 

$previous = ($imgid < 1 ? $last : $imgid - 1); 
$next = ($imgid >= $last+1 ? 0 : $imgid + 1); 

// If I just need to return a snippet, then do that and 
// exit. This prevents the full code from returning, 
// and does so based on the GET `type` value provided. 

if ($type == 'snippet') { 
    echo "<img class='view' src='{$images[$imgid]}'/>"; 
    exit; 
} 

// This will output the full page. Note, it also 
// accounts for when the Ajax produces an error, since 
// it will respond correctly to a URL with no `type` 
// provided and with an `img` value. 

echo <<<HTML 
<html> 
<head> 
<style type="text/css"> 
</style> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script> 
<script type="text/javascript"> 

$(document).ready(function(){ 
    $('.browse').click(function(){ 
     that = $(this); 
     // I use the `rel` attribute to store image- 
     // related data. Each ANCHOR has the reference 
     // to the imgid it needs to request the correct 
     // image snippet. 
     var imgid = that.attr('rel'); 
     // I need this for errors. This allows me to 
     // show the image by bypassing the Ajax call when 
     // it doesn't work correctly. 
     var href = that.attr('href'); 
     $.ajax({ 
      // Note, `get` is default, but I provided it 
      // for demonstration purposes and to make it 
      // clear this is what is happening. 
      type: 'get', 
      // Note the `type=snippet` part. 
      url: 'getimages.php?type=snippet&img='+imgid, 
      // What to do when the Ajax call appears to 
      // complete successfully. 
      success: function(data){ 
       // If the server didn't respond with an 
       // `<img .../>` tag, send the browser to 
       // the `href` instead. 
       if (data.indexOf('<img') == -1) { 
        window.location = href; 
       } 
       // I'm going to replace the image with the 
       // new image I just got. 
       $('.view').replaceWith(data); 
       // The bits that manipulate the current 
       // page's values for next and previous. 
       // Note the use of the `rel` tag here. 
       var first = $('#first').attr('rel'); 
       var last = $('#last').attr('rel'); 
       var previous = $('#previous').attr('rel') - 1; 
       var next = $('#next').attr('rel') - 0 + 1; 
       if (previous < 0) previous = last; 
       if (next > last || next == last) next = 0; 
       $('#previous').attr('rel', previous); 
       $('#next').attr('rel', next); 
      }, 
      // Again, if the Ajax call errors out, I simply 
      // send the browser to the url found in the `href`. 
      error: function(){ 
       window.location = href; 
      } 
     }); 
     // Cancel the browser following the `href` tag. 
     return false; 
    }); 
}); 

</script> 
</head> 
<body> 
<div> 
<img class="view" src="{$images[$imgid]}"/> 
<p> 
<a class="browse" id="first" rel="$first" href="?img=$first">First</a> 
<a class="browse" id="previous" rel="$previous" href="?img=$previous">Previous</a> 
<a class="browse" id="next" rel="$next" href="?img=$next">Next</a> 
<a class="browse" id="last" rel="$last" href="?img=$last">Last</a> 
</p> 
</div> 
</body> 
</html> 
HTML; 

?> 

什么逛http://jfcoder.com/test/getimages.php时，浏览器会看到：

<html> 
<head> 
<style type="text/css"> 
</style> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script> 
<script type="text/javascript"> 

$(document).ready(function(){ 
    $('.browse').click(function(){ 
     that = $(this); 
     // I use the `rel` attribute to store image- 
     // related data. Each ANCHOR has the reference 
     // to the imgid it needs to request the correct 
     // image snippet. 
     var imgid = that.attr('rel'); 
     // I need this for errors. This allows me to 
     // show the image by bypassing the Ajax call when 
     // it doesn't work correctly. 
     var href = that.attr('href'); 
     $.ajax({ 
      // Note, `get` is default, but I provided it 
      // for demonstration purposes and to make it 
      // clear this is what is happening. 
      type: 'get', 
      // Note the `type=snippet` part. 
      url: 'getimages.php?type=snippet&img='+imgid, 
      // What to do when the Ajax call appears to 
      // complete successfully. 
      success: function(data){ 
       // If the server didn't respond with an 
       // `<img .../>` tag, send the browser to 
       // the `href` instead. 
       if (data.indexOf('<img') == -1) { 
        window.location = href; 
       } 
       // I'm going to replace the image with the 
       // new image I just got. 
       $('.view').replaceWith(data); 
       // The bits that manipulate the current 
       // page's values for next and previous. 
       // Note the use of the `rel` tag here. 
       var first = $('#first').attr('rel'); 
       var last = $('#last').attr('rel'); 
       var previous = $('#previous').attr('rel') - 1; 
       var next = $('#next').attr('rel') - 0 + 1; 
       if (previous < 0) previous = last; 
       if (next > last || next == last) next = 0; 
       $('#previous').attr('rel', previous); 
       $('#next').attr('rel', next); 
      }, 
      // Again, if the Ajax call errors out, I simply 
      // send the browser to the url found in the `href`. 
      error: function(){ 
       window.location = href; 
      } 
     }); 
     // Cancel the browser following the `href` tag. 
     return false; 
    }); 
}); 

</script> 
</head> 
<body> 
<div> 
<img class="view" src="http://upload.wikimedia.org/wikipedia/commons/d/db/087882_cf786e35-by-Roger-May.jpg"/> 
<p> 
<a class="browse" id="first" rel="0" href="?img=0">First</a> 
<a class="browse" id="previous" rel="3" href="?img=3">Previous</a> 

<a class="browse" id="next" rel="1" href="?img=1">Next</a> 
<a class="browse" id="last" rel="3" href="?img=3">Last</a> 
</p> 
</div> 
</body> 
</html> 

什么我$.ajax()将从http://jfcoder.com/test/getimages.php?type=snippet&img=1看到（基于链接点击和被观察到的图像）：

<img class='view' src='http://upload.wikimedia.org/wikipedia/commons/6/6c/173865_d45f46f7-by-dave-challender.jpg'/>