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

有人会帮助/让我朝着正确的方向吗？

不要重新声明'变种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>

答

运行的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请求

相关推荐