將JavaScript變量傳遞給JSON請求

Learner Driver Alert！將JavaScript變量傳遞給JSON請求

我試圖將名稱變量「name」&下面的表單中的搜索字段內容輸入到flickr API JSON請求標記字段（以下第40行）中。我試過各種方法來聲明變量&似乎無法找到我在網上尋找的東西。我猜測，它不知道我正在尋找什麼。

<!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>

有人會幫助/讓我朝着正確的方向嗎？

來源

2015-10-15 Mr T

不要重新聲明'變種name'再次在'$（「#search」）。提交功能。這使var'name'的範圍侷限於此。這意味着它傳遞給你的JSON函數時它是空的或沒有值。你想要的是：'/ * var */name = $（「＃search-name」）。val（）;' – user3065931

爲什麼你添加'$（「＃search」）。submit（）'兩次？一個就足夠了。 – vijayP

聽衆是錯誤的。明白了！謝謝 –

您不需要2個事件偵聽器。 var name = $("#search-name").val();將爲name創建本地範圍，因此您不會在全局name中找到價值。

試試這樣說：

$("#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>

來源

2015-10-15 08:37:27 Rayon

運行的jQuery作爲這樣似乎爲我工作。你可以對其進行測試，還要注意我改變了參考閃爍被加載安全腳本：

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小提琴：https://jsfiddle.net/vsw3r31k/

來源

2015-10-15 08:50:44

將JavaScript變量傳遞給JSON請求

回答

相關問題