Get Image results from Google Image API returning invalid label (jQuery)
So I am trying to show x amount of images from google using the following code, but it keeps returning invalid label. Does anyone have any ideas? thanks in advance for your help.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div id="google_images"></div>
<script type="text/javascript">
$(document).ready(functio开发者_开发问答n(){
var iURL = "http://ajax.googleapis.com/ajax/services/search/images?v=1.0&q=kufa+castro&format=json&jsoncallback=?";
$.getJSON(iURL,function(json) {
$(json).each(function() {
$.each(json.results, function(i,item)
{
//$("#google_images").append(item.unescapedUrl);
$('#google_images').html();
});
});
});
});
You need to specify jsonp
as dataType
.
Have a look at this working: http://www.jsfiddle.net/FX79h/2/
Just in case someone sees this, I changed this stuff up. ended up doing it this way: (could do blogs or images - BUT could do any other thing from Google api with some tweeking)
// return values from using Googles Image API
// search types (images,blogs) // for posts (postUrl, titleNoFormatting) // for images (unescapedUrl) function google_search_api($search,$searchType,$count) {
$url = 'http://ajax.googleapis.com/ajax/services/search/'.$searchType.'?v=1.0&q='.urlencode($search).'&filter=1';
if($searchType == "images"){
//&rsz=large
$url .="&safe=moderate";
}
$ip=$_SERVER['REMOTE_ADDR'];
$url .="&userip=$ip&rsz=$count&key=".GOOGLE_API;
#echo $url;
$obj = json_decode( file_get_contents($url) );
foreach($obj->responseData->results as $i)
{
// for images
if($searchType == "images")
{
$source = "/timthumb.php?src=".$i->unescapedUrl."&a=t&h=75&w=75";
//$source = $i->unescapedUrl;
if (fopen($i->unescapedUrl, "r")) {
echo "<li><img src=\"".$source."\" alt=\"".$search."\" width=\"75\" height=\"75\" /></li>";
}
}
// for blogs
else
{
//$title = mb_convert_encoding($i->titleNoFormatting, 'iso-8859-1');
$title = mb_convert_encoding($i->titleNoFormatting, "ISO-8859-1", "UTF-8");
echo "<li><a href=\"".$i->postUrl."\" rel=\"external\"/>".$title."</a></li>";
}
}
} //USE: google_search_api('Jay Z','images','5')
I changed the datatype to jsonp as shown below:
dataType: 'jsonp'
and json.results
to json.responseData.results
and it worked fine.
I have also used this to update my wordpress blog with relevant image based on the post title.
The code I used is as listed below:
<script type="text/javascript">
$(function(){
var iURL = "http://ajax.googleapis.com/ajax/services/search/images";
$.ajax({
url: iURL,
type: 'GET',
dataType: 'jsonp',
data: {
v: '1.0',
q: $(".art-postheader").text(),
format: 'json',
jsoncallback: '?'
},
success: callback
});
});
function callback(json){
$("div.art-postcontent p:eq(2)")
.after("<img src='"
+json.responseData.results[0].unescapedUrl
+"' width='300px' align='left' />");
}
</script>
精彩评论