我觉得更有意义,表明后面怎么使用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'/>
如果你展示了你的尝试,你可能会得到更好的回应。 –
以及我将我摆脱它,因为它没有工作,但基本上我用的。jQuery的ajax函数,并尝试通过标签href属性传递给变量的索引页,但我没有工作。 – Deep
Ajax中的GET调用只是一个带有GET键/值的URL。试着对它进行硬编码,看看会发生什么。你应该有一种返回你的标记的片段的方式;您无需返回整个HTML,只需更换页面上的内容即可。 –