将输入的文本字段值传递给 getJSON 字符串？答案

【问题标题】：Passing entered text field value into getJSON string?将输入的文本字段值传递给 getJSON 字符串？
【发布时间】：2015-04-28 22:42:55
【问题描述】：

我正在尝试使用 flickr API 向此图像搜索器中输入的标签添加一些功能。我让它工作，但它只有在我在代码中编写字符串时才有效。例如，我现在有“猫”。我的目标是将输入的值从文本框 (id="textbox1") 传递到上面脚本中的标签中。我希望能够从文本框中搜索而不是进入代码。感谢您提供任何提示/建议！

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>

<head>
  <script type="text/javascript" src="jquery-1.11.2.js"></script>
</head>

<body>
  <script type="text/javascript">
    $(document).ready(function() {
      $("#button").click(function() {
        $("#images").empty();



        $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", {
          tags: "cats",
          tagmode: "any",
          format: "json"
        }, function(data) {
          console.log(data);
          $.each(data.items, function(i, item) {

            $(".buttonclick").remove();


            $('<img/>').attr("src", item.media.m).appendTo('#images');
            if (i == 1) return false;
          });
        });

      });
      $('#images').on('click', 'img', function() {
        var $imgClone = $(this).clone().attr('src', $(this).attr('src').replace('_m.', '_b.'));
        $('#main').html($imgClone);
      });
    });


    $(document).ready(function() {

      var counter = 2;

      $("#addButton").click(function() {

        if (counter > 10) {
          alert("Only 10 textboxes allow");
          return false;
        }

        var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
        newTextBoxDiv.after().html('<label></label>' +
          '<input type="text" name="textbox' + counter +
          '" id="textbox' + counter + '" value="" >');

        newTextBoxDiv.appendTo("#TextBoxesGroup");

        counter++;
      });

      $("#removeButton").click(function() {
        if (counter == 1) {
          alert("No more textbox to remove");
          return false;
        }
        counter--;

        $("#TextBoxDiv" + counter).remove();
      });

      $("#getButtonValue").click(function() {

        var msg = '';
        for (i = 1; i < counter; i++) {
          msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
        }
        alert(msg);
      });

    });
  </script>
  <h1>Image Search</h1>

  <button type="button" id="button">Search</button>
  <input type='button' value='Remove Tag' id='removeButton'>

  <div id='TextBoxesGroup'>
    <div id="TextBoxDiv1">
      <input type='textbox' id='textbox1'>
      <input type='button' value='Add tag' id='addButton'>
    </div>
  </div>


  <div id="images" /></div>



</body>

</html>

【问题讨论】：

标签： javascript html textfield getjson

【解决方案1】：

在 $.getJSON 中，您可以使用

切换“cats”

$("#textbox1").val(),

它会使用输入的值（无论用户输入什么）作为“标签”的值。

//Stuff before

tags:$("#textbox1").val(),

//Stuff after

我希望这会有所帮助！

编辑：如果你想了解更多关于 jQuery 的 .val() 的信息，你可以阅读文档here。

【讨论】：