我正在构建一个闪烁应用程序,我注意到闪烁使用不同类型的 jSONP 回调
作为我的 JSONP 回调替换我现有网址?即使我传递它们,我现有的 url 也没有给出页码。
flicker 生成的新 url 发布在下面,但我没有为其添加 json 回调。
我的工作代码如下
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script language="javascript">
function myAJAXfun(event) {
var searchTerm = $("#search").val(); // get the user-entered search term
var URL = "http://api.flickr.com/services/feeds/photos_public.gne";
var ID = "25053835@N03";
//var tagmode="&tagmode=any";
//var format ="&format=json";
var perpage = 10;
var page = 1;
var tags = "&tags=" + searchTerm;
var tagmode = "&tagmode=any";
var jsonFormat = "&format=json&jsoncallback=?";
var ajaxURL = URL + "?jsoncallback=?id=" + ID + "&per_page=" + perpage + "&page=" + page + tags + tagmode + jsonFormat;
//var ajaxURL= URL+"?"+tags+tagmode+jsonFormat;
$.getJSON(ajaxURL, function (data) {
//$("h1").text(data.title);
//alert(data.length);
var photoHTML;
$("#photos").empty();
if (data.items.length) {
alert(data.items.length);
$.each(data.items, function (i, photo) {
//var photoHTML = "<h4>" +photo.tags + "</h4>";
photoHTML += '<a href="' + photo.link + '">';
photoHTML += '<img src="' + photo.media.m + '" alt="' + photo.media.m + '" title="' + photo.media.m + '"></a>';
$('#photos').append(photoHTML).fadeIn(200);
});
} else {
alert(data.items.length);
photoHTML = "<h2> No Results</h2>";
$('#photos').append(photoHTML).fadeIn(200);
}
//$('#photos').append(photoHTML).fadeIn(200);
});
}
$(document).ready(function () {
$("#submit").click(function (event) {
myAJAXfun();
});
$("#scrollbox").scroll(function () {
// check if we're at the bottom of the scrollcontainer
//alert($(this)[0].scrollHeight + "- "+$(this).scrollTop() +"== "+$(this).outerHeight())
if ($(this)[0].scrollHeight - $(this).scrollTop() == $(this).outerHeight()) {
// If we're at the bottom, retrieve the next page
page++;
//$("#submit").click();
myAJAXfun();
}
// myAJAXfun();
});
});
</script>
<style type="text/css">
#container {
width:400px;
margin:0px auto;
padding:40px 0;
}
#scrollbox {
width:900px;
height:450px;
overflow:auto;
overflow-x:hidden;
border:1px solid #f2f2f2;
margin-top:150px;
}
#container > p {
background:#eee;
color:#666;
font-family:Arial, sans-serif;
font-size:0.75em;
padding:5px;
margin:0;
text-align:right;
}
#searchBar {
align:center;
position:fixed;
height:150px;
background-color:#777;
border:1px solid red;
width:100%;
top:0;
}
#photos {
}
</style>
</head>
<body>
<div align="center" id="searchBar">
<h2>flicker tag search</h2>
<div>Enter Search Term</div>
<input type="text" id=search />
<input type="button" id=submit value="Search" />
</div>
<div id="container">
<div id="scrollbox">
<div id="photos"></div>
</div>
<p><span id="status"></span>
</p>
</div>
</body>
</html>