Question

我正在尝试构建一个允许用户在文本字段中输入文本并在键盘上按Enter键的页面，它将返回带有该文本的前10个维基百科条目。

目前，我担心的是每次获取JSON时页面都会刷新。当我读到其他问题时，我尝试了e.preventDefault（）方法，但它不起作用。有人可以帮助我理解为什么会发生这种自动刷新，以及如何解决它？谢谢。

这是我的HTML：

<div class="container-fluid">
  <form action="#">
    <input id="search" name="query" onkeyup="" type="text"></input>
  </form>
</div>
<div class="main"></div>
</div>

这是我的Javascript：

$(document).ready(function() {
  $("#search").on("keyup", function(e) {

    // attempt to prevent page refresh
    e.preventDefault();

    // if key pressed is "enter"
    if (e.keyCode == 13) {

      // retrieve user input
      var search = document.getElementById("search").value;

      // build Wikipedia API url
      var request = "https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" + search + "&format=json&callback=?";

      $.getJSON(request, function(json) {
      var x = json.query.search[0]["snippet"];
      $(".main").html(x);
      });
    };
  });
});

这是一个链接：https://codepen.io/lieberscott/pen/RLVaGE

Answer 1

因为您提交表单（按Enter键即可）。表单提交到当前页面，看起来像重新加载。

<form id="searchform>
    <input id="search" name="query" onkeyup="" type="text"></input>
  </form>

$('#searchform').on('submit', function(e){
    e.preventDefault();
    // your magic here.
});

preventDefault会停止按键UP，但到那时，您已经开始提交了。 poreventDefault停止输入作为文本输入（您可以使用textarea检查）。如果您将其更改为字母，例如A，则您键入A，但不会看到它。

你也可以删除表单本身，只保留输入，如果这不会产生其他问题，导致HTML更少，这很好。

Answer 2

从HTML中删除<form>标记。

Answer 3

您使用的是form，enter/return会在button type="submit"上尝试提交表单。

除非input type='submit'或<div class="container-fluid"> <input id="search" name="query" onkeyup="" type="text"></input> </div> <div class="main"></div> </div>删除表单并仅使用输入

OPENGL NATIVE PLUG-IN ERROR: GL_INVALID_FRAMEBUFFER_OPERATION: Framebuffer is not complete or incompatible with command

页面在JSON请求上刷新

3 个答案: