Passing a Javascript Variable into a JSON request
Question
Learner Driver Alert!
I'm trying to transfer the search field content from the form below named variable "name" & input it into the flickr API JSON Request tags field (line 40 below). I've tried all sorts of ways of declaring the variable & can't seem to find what I'm looking for on the web. I'm guessing that its me not knowing exactly what I'm searching for.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.getJSON demo</title>
<style>
img {
height: 100px;
float: left;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<form id="search">
<p><input id="search-name" type="text" placeholder="Type Region Here"></p>
<p><input id="search-submit" type="submit" value="Search For Region"></p>
</form>
<div id="images"></div>
<script>
var name;
$("#search").submit(function(event){
event.preventDefault();
var name = $("#search-name").val();
console.log("Search Term Was: "+name);
return false;
});
$("#search").submit(function(event) {
(function() {
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
$.getJSON( flickerAPI, {
tags: name,
tagmode: "any",
format: "json"
})
.done(function( data ) {
$.each( data.items, function( i, item ) {
$( "<img>" ).attr( "src", item.media.m ).appendTo( "#images" );
if ( i === 0 ) {
return false;
}
});
});
})();
});
</script>
</body>
</html>
Would anyone be so kind to help / put me in the right direction?
2 answers
solution1
1 2015-10-15 08:37:27
You do not need 2 event listeners for this.
var name = $("#search-name").val();will create local scope fornamehence you won't find value in globalname.
Try it this way:
$("#search").submit(function(event) { event.preventDefault(); var name = $("#search-name").val(); var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; $.getJSON(flickerAPI, { tags: name, tagmode: "any", format: "json" }) .done(function(data) { $.each(data.items, function(i, item) { $("<img>").attr("src", item.media.m).appendTo("#images"); if (i === 0) { return false; } }); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery.getJSON demo</title> <style> img { height: 100px; float: left; } </style> </head> <body> <form id="search"> <p> <input id="search-name" type="text" placeholder="Type Region Here"> </p> <p> <input id="search-submit" type="submit" value="Search For Region"> </p> </form> <div id="images"></div> </body> </html>
solution2
1 2015-10-15 08:50:44
Running the jQuery as so seems to work for me. You could test it out but also note that i changed the reference to flicker to be loaded as secure script:
var name;
$("#search").submit(function(event){
event.preventDefault();
name = $("#search-name").val();
alert("Search Term Was: "+name);
var flickerAPI = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
$.getJSON( flickerAPI, {
tags: name,
tagmode: "any",
format: "json"
})
.done(function( data ) {
alert('done');
$.each( data.items, function( i, item ) {
$( "<img>" ).attr( "src", item.media.m ).appendTo( "#images" );
if ( i === 0 ) {
return false;
}
});
})
.fail(function() {alert('fail')});
});
JS Fiddle: https://jsfiddle.net/vsw3r31k/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.