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

我试图使输入元素中键入的文本可用于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=". . .">

当我这样做时，控制台显示一个错误，表示找不到未定义的长度。我知道这意味着我当前的值检索方法不起作用。有什么想法吗

另外，我也在代码笔上进行编码，我不知道这是否会引起问题

---

编辑：我以前在val有过它，但忘记把它改回来了。它仍然无法正常工作。

您试图使用文本检索输入的文本，但应该使用val

有关此主题的更多详细信息，请参阅

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

首先使用.val而不是.text

第二步将搜索和api的定义移动到on click函数中

$("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();
    });
  });
});

---

您正试图在dom中获取输入值，此时还没有人在框中输入任何内容。您应该在按钮单击处理程序中执行此操作。另外，如果您确实检查了响应，您会看到api返回了一个错误，即check data.error，说您没有提供正确的搜索参数。如何执行错误回调？我对编码还是很陌生，所以它应该是$'input'.val。不是$'input'。文本读取文本框的内容。正如@PatrickEvans所说，您必须移动var search=$'input'。val&var api=。。。。要进入btn点击功能