GetJSON jquery returns 未定义

Question

我正在尝试让我的搜索框正常工作，并对文本搜索和标题执行 getJSON。但在控制台日志中，我得到 text=undefined?title=undefined。所以它没有显示任何 JSON。不确定我的点击是否正常，或者我是否必须让我的 JSON objects？

脚本

 <script>
     var searchstring = $('input[type="text"]', this).val();
     var url = "https://data.edu/api/v1/metadata";

     url += "?text=" + searchstring;
     url += "?title=" + searchstring;


    $(document).ready(function() {
        $('button[type="button"]').click(function(event){

           $.ajax({
            type: "GET",
            url: url,

            success: function(res){
                console.log(res);
                  var items = res.data.metadata;
                  var ins = "";
                  for (var i = 0; i < items.length; i++){
                    ins += "<div>";
                    ins += "Title" + items[i].title;
                    ins += "Title" + items[i].title;
                    ins += "Title" + items[i].title;
                    ins += "</div><br />";
                  };
                  $('#results').html(ins);
                }

            });         
        });
     });

  </script>

html

              <form class="destinations-form"  role="search" >
                 <div class="input-line">
                    <input id="searchForm"  type="text"  class="form-input check-value" placeholder="Search Documents" />

                    <button type="button"  class="form-submit btn btn-special"  "</button>

                 </div>
              </form>
               <div class="container">
                  <div class="hero-text align-center">
                     <div id="results"></div>
                  </div>
              </div>

json

data: [
    {
        collection_id: "ADGM-1552427432270-483",
        metadata:{
                   year: "2019",
                   files: text ,
                   title: text,
                },

Answer 1

问题是因为您仅在页面首次加载时才从该字段中读取值，并且它是空的。要解决此问题，请将该逻辑移入 click 处理程序。

下一个问题是您应该从 $('input[type="text"]', this) 中删除 this。您在这里不需要上下文选择器，无论如何这个选择器都是不正确的。

另请注意，有效的查询字符串以 ? 开头并用 & 分隔每个值，因此您的 url 连接需要稍微修改。此外，您不应在每次点击时更新 url 值。如果您这样做，您的 AJAX 请求将只工作一次。

最后，您回复中的 metadata 是一个对象，而不是数组。 data 是数组，所以你需要循环遍历它。使用 map() 也可以简化循环。试试这个：

$(document).ready(function() {
  const url = "https://data.edu/api/v1/metadata";

  $('button[type="button"]').on('click', function(e) {
    let searchstring = $('input[type="text"]').val();
    let requestUrl = url + `?text=${searchstring}&title=${searchstring}`;

    $.ajax({
      type: 'GET',
      url: requestUrl,
      success: function(res) {
        let html = res.data.map(item => `<div>Title ${item.metadata.title}</div><br />`);
        $('#results').html(html);
      }
    });
  });
});

GetJSON jquery returns 未定义

GetJSON jquery returns undefined

html

javascript

jquery

getjson

buttonclick