您好，有人可以向我解释如何使用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>
所以基本上它是一个简单的分页显示divs，其中包含从数据库中检索的图片等。如何通过ajax发送特定的get语句，以便在没有页面刷新的情况下更新下一组div。我自己尝试过，但无法理解。
再次感谢。
好的，这就是我能得到的。如何显示检索到的内容？我已经在互联网上看了但是有很多不同的方法可以做到这一点我无法理解哪些以及为什么你会这样做。
$("a#morebutton").click(function() {
e.preventDefault();
$.ajax({
type: "GET",
url: index.php+$('a#morebutton').attr('href') ,
});
e.preventDefault();
});
答案 0 :(得分：1)
通过阅读您的代码，我认为这就是您想要的：
$(".morebtn a").click(function(e) {
e.preventDefault();
$.get("index.php"+$(this).attr("href"), function(result) {
$(".imgholderfloat").html(result);
});
}
答案 1 :(得分：0)
我认为在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'/>
答案 2 :(得分：-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调用，可能需要一些调整才能让它按照您的意愿运行。