Question

我正在尝试将输入元素内部的文本输入以用于JSON请求。

$("document").ready(function() {
  var search = $('#input').val()
  var api =
    "https://en.wikipedia.org/w/api.php?callback=?&action=opensearch&format=json&search=" +
    search +
    "&namespace=0&limit=10&profile=fuzzy&suggest=1";

  //   Button function
  $(".btn").click(function() {
    function listClear() {
      $("ul").empty();
    }
    listClear();
    $.getJSON(api, function(data) {
      function listCreate() {
        var arr = data[1];
        for (i = 0; i < arr.length; i++) {
          $("ul").append("<li>" + arr[i] + "</li>");
        }
      }

      listCreate();
    });
  });
});

我的元素看起来像这样

<input type="search" id="input" class="form-control" placeholder=". . .">

当我这样做时，控制台会显示一条错误消息，指出无法找到未定义的长度。我明白这意味着我目前的价值检索方法不起作用。有什么想法吗？

PS。我也在codepen上进行编码（https://codepen.io/WatchConnorCode/pen/JybGVJ?editors=1010）我不知道这是否会引起问题？

编辑：我之前在val处找过它并忘了改回来。它仍然没有按预期工作。

Answer 1

您尝试使用text()检索输入文本，但您应该使用val()。

有关此主题的详细信息，请参阅How do I get the value of text input field using JavaScript?。

此外，您需要移动在api函数中创建click值的代码，因为您正在尝试获取输入时存在的文本。按钮单击。按原样，当DOM完成加载时，您将对其进行一次评估。

Answer 2

首先使用.val()代替.text()。

第二步在点击功能

中移动search和api的定义

$("document").ready(function() {

  //   Button function
  $(".btn").click(function() {
  var search = $('#input').val()
  var api =
    "https://en.wikipedia.org/w/api.php?callback=?&action=opensearch&format=json&search=" +
    search +
    "&namespace=0&limit=10&profile=fuzzy&suggest=1";
    function listClear() {
      $("ul").empty();
    }
    listClear();
    $.getJSON(api, function(data) {
      function listCreate() {
        var arr = data[1];
        for (i = 0; i < arr.length; i++) {
          $("ul").append("<li>" + arr[i] + "</li>");
        }
      }

      listCreate();
    });
  });
});

https://codepen.io/anon/pen/eEvWLz?editors=1010

如何将输入的输入文本输入到json请求？

2 个答案: