javascript - 将 Javascript 变量传递到 JSON 请求

标签 javascript jquery 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>

有人愿意帮助/引导我走向正确的方向吗?

最佳答案

You do not need 2 event listeners for this. var name = $("#search-name").val(); will create local scope for name hence you won't find value in global 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>

关于javascript - 将 Javascript 变量传递到 JSON 请求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33143565/

相关文章:

javascript - Jquery数组通过ajax发送到php

javascript - 使用 HTMLtoJSON 将 HTML 表中的值返回为 JSON 格式

.net - 反序列化时如何配置ServiceStack.Text JsonSerializer 属性名称

javascript - 在 JavaScript 中使用 "and '

javascript - 覆盖 Chrome 中的功能键默认操作

javascript - 将Json数据转换为数组

java - 使用 MongoDB 删除新数组并将其添加到 JSON 对象中

javascript - 如何在 Javascript 中将对象作为参数传递

jquery - 在 Bootstrap 模式窗口上显示并发出警报

javascript - 在将元素属性设置为空字符串之前,如何存储元素属性以供以后使用?