GetJSON jquery 返回未定义

Question

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

脚本

 <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处理程序内。下一个问题是您应该this从 中删除$('input[type="text"]', this)。这里不需要上下文选择器，无论如何，这个选择器都是不正确的。另请注意，有效的查询字符串以 开头?并用 分隔每个值&，因此url需要稍微修改您的连接。此外，您不应url在每次点击时更新该值。如果您这样做，您的 AJAX 请求将只能工作一次。最后，metadata您的响应中的 是一个对象，而不是数组。data是数组，因此您需要对其进行循环。还可以使用 来简化循环map()。尝试这个：$(document).ready(function() {&nbsp; const url = "https://data.edu/api/v1/metadata";&nbsp; $('button[type="button"]').on('click', function(e) {&nbsp; &nbsp; let searchstring = $('input[type="text"]').val();&nbsp; &nbsp; let requestUrl = url + `?text=${searchstring}&title=${searchstring}`;&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; type: 'GET',&nbsp; &nbsp; &nbsp; url: requestUrl,&nbsp; &nbsp; &nbsp; success: function(res) {&nbsp; &nbsp; &nbsp; &nbsp; let html = res.data.map(item => `<div>Title ${item.metadata.title}</div><br />`);&nbsp; &nbsp; &nbsp; &nbsp; $('#results').html(html);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; });});