使用回车键触发Wikipedia API搜索时出错的技术求助

嘿，我仔细看了你的代码，马上就发现问题所在啦！

你的输入框<input>是放在<form>标签里面的，当你按下回车键的时候，浏览器会触发表单的默认提交行为——页面会刷新，这就直接打断了正在进行的AJAX请求，所以你会看到错误；而点击搜索按钮的时候，不会触发表单提交，所以请求能正常完成。

下面给你几个可行的解决办法：

方法1：阻止表单的默认提交行为 #

给表单添加submit事件监听，阻止它的默认动作，同时把搜索逻辑绑定到这个事件上（这样不管是回车还是点击按钮，都能触发搜索，逻辑更统一）：

$(document).ready(function() {
  function search(keyword) {
    // 给关键词做URL编码，避免特殊字符导致请求错误
    const encodedKeyword = encodeURIComponent(keyword);
    $.ajax({
      url: "https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" + encodedKeyword + "&prop=info&inprop=url&utf8=&format=json",
      dataType: "jsonp",
      success: function(response) {
        alert(response.query.search[0].title);
        // 你的后续展示逻辑
      },
      error: function() {
        alert("Error retrieving search results, please refresh the page");
      }
    });
  }

  // 阻止表单默认提交，并触发搜索
  $("form").on("submit", function(e) {
    e.preventDefault();
    search($("#article-search").val());
  });

  // 搜索按钮点击触发表单提交，统一逻辑
  $(".search-button").on("click", function() {
    $("form").submit();
  });
});

方法2：移除不必要的<form>标签 #

如果这个表单只是用来布局、没有实际提交需求，直接删掉<form>标签就好了，这样回车键就不会触发表单提交：

修改后的HTML片段：

<div class="container-fluid text-center" id="display-result">
  <div class="form-group">
    <label for="article-search">Search for a Wikipedia article:</label>
    <input type="text" class="form-control" id="article-search">
  </div>
  <button class="button search-button">Search <i class="fa fa-search"></i></button>
  <a href='https://en.wikipedia.org/wiki/Special:Random' target='_blank'>
    <button class="button random-article">Random article <i class="fa fa-random"></i></button>
  </a>
</div>

原JS里的回车触发逻辑就能正常工作了，同样建议给关键词加上encodeURIComponent()编码优化。

额外小建议 #

• 搜索前可以判断输入框是否为空，避免发送无意义的空请求；
• 可以给输入框添加防抖处理，避免用户连续输入时频繁发起请求。

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