搜索框GetJSON请求返回undefined问题排查求助

我帮你梳理下代码里的核心问题，这些就是导致你看到text=undefined?title=undefined、无法加载JSON数据的原因：

问题分析 #

• DOM未加载就获取输入值：你在$(document).ready()外面就定义了searchstring，这时候页面的输入框还没渲染完成，自然拿不到值，结果就是undefined。必须把获取输入值的逻辑放到点击事件内部，确保点击按钮时才去读取最新的输入内容。
• URL参数拼接错误：你用了两个?来拼接参数，正确的URL格式应该是第一个参数用?，后续参数用&连接，比如?text=xxx&title=xxx，否则第二个参数会被浏览器忽略或者解析错误。
• HTML按钮标签语法错误：你的button标签没正确闭合，写成了" </button>，这会导致DOM解析异常，可能直接影响点击事件的绑定。
• 循环内重复冗余代码：你在循环里连续写了三次ins += "Title" + items[i].title;，这明显是笔误，得改成你实际需要的内容。

修正后的完整代码 #

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">Search</button>
  </div>
</form>
<div class="container" >
  <div class="hero-text align-center" >
    <div id="results"></div>
  </div>
</div>

Script部分

$(document).ready(function() {
  $('button[type="button"]').click(function(event){
    // 点击按钮时才获取输入框的最新值
    var searchstring = $('#searchForm').val();
    
    // 先判断输入是否为空，避免发起无效请求
    if (!searchstring.trim()) {
      $('#results').html('<p>请输入搜索关键词</p>');
      return;
    }

    var url = "https://data.edu/api/v1/metadata";
    // 正确拼接多参数，用&连接，同时编码特殊字符
    url += "?text=" + encodeURIComponent(searchstring);
    url += "&title=" + encodeURIComponent(searchstring);
    
    $.ajax({
      type: "GET",
      url: url,
      success: function(res){
        console.log(res);
        // 先校验返回数据的结构，避免报错
        if (!res.data || !res.data.metadata) {
          $('#results').html('<p>未找到匹配的文档</p>');
          return;
        }
        
        var items = res.data.metadata;
        var ins = "";
        for (var i = 0; i < items.length; i++){
          ins += "<div>";
          ins += "<h3>" + items[i].title + "</h3>";
          ins += "<p>年份：" + items[i].year + "</p>";
          // 这里可以根据你的需求添加更多内容，比如文件信息
          ins += "</div><br />";
        };
        $('#results').html(ins);
      },
      // 增加错误处理，方便排查请求失败的原因
      error: function(xhr, status, error) {
        console.error('请求失败:', status, error);
        $('#results').html('<p>搜索失败，请稍后重试</p>');
      }
    });
  });
});

额外优化说明 #

• 用encodeURIComponent()对搜索字符串编码，避免空格、特殊字符导致URL解析错误
• 增加了输入为空的判断，防止发起无意义的请求
• 添加了AJAX错误处理函数，方便你排查请求失败的具体原因
• 对返回的数据结构做了校验，避免因接口返回格式不符导致页面崩溃

内容的提问来源于stack exchange，提问作者Lbook