將Javascript變量傳遞到JSON請求中

Question

學習者駕駛員警報！

我正在嘗試從命名變量“ name”下面的表單中傳輸搜索字段內容，並將其輸入到flickr API JSON Request標簽字段（下面的第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>

有人會這么樂於幫助我/朝正確的方向發展嗎？

Answer 1

您不需要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>

Answer 2

這樣運行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/

將Javascript變量傳遞到JSON請求中

問題描述

2 個解決方案

解決方案1
1 2015-10-15 08:37:27

解決方案2
1 2015-10-15 08:50:44

將Javascript變量傳遞到JSON請求中

問題描述

2 個解決方案

解決方案1 1 2015-10-15 08:37:27

解決方案2 1 2015-10-15 08:50:44

解決方案1
1 2015-10-15 08:37:27

解決方案2
1 2015-10-15 08:50:44