将Javascript变量传递到JSON请求中

Passing a Javascript Variable into a JSON request

本文关键字：JSON 请求 Javascript 变量      更新时间：2023-09-26

学习驾驶警报!

我试图转移搜索字段的内容从下面的形式命名变量"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>
有谁能好心地给我指个方向吗?

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

像这样运行jQuery似乎对我有用。你可以测试一下，但也要注意，我改变了flicker作为安全脚本加载的引用:

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/

相关文章：