javascript - 页面导航到 localhost :3000/? 在输入框中输入按下

Question

我正在使用从输入字段获取搜索查询的 NewYorkTimes API，但是，当我在键入输入后按回车键时，我的本地主机会重新加载并导航到 localhost:3000/？

我在控制台中使用 console.log(url) 并且 url 是正确的，因为 JSON 请求返回结果，但结果不会以 HTML 格式显示，因为页面会自动导航。不确定是什么导致了这种情况的发生。

form
   span.material-icons search
   input.form-control(id="input", placeholder="Search for articles, headlines, etc.")

// SHOWS SEARCH RESULTS WHEN THE USER PRESSES ENTER
$("#input").keypress(function(event) {
    if (event.keyCode == 13) {
        searchArticles(this.value);
        $("#input").val("");     
    }
});

// MAKES THE REQUEST AND DISPLAYS THE NEWS BASED ON RESULTS
function searchArticles(term) {
    term = term.replace(" ", "+");
    searchURL = "http://api.nytimes.com/svc/search/v2/articlesearch.json?q=" + term + "&api-key=" + searchAPI;
    console.log(searchURL);
    $.getJSON(searchURL, function(api) {
        api.response.docs.forEach(function(data) {
            link = data.url;
            cardTitle = data.headline;
            postedBy = data.byline.original;
            createCardElements();
        });
    });
}

这是示例 JSON 请求:

http://api.nytimes.com/svc/search/v2/articlesearch.json?q=new+york+times&page=2&sort=oldest&api-key=sample-key

Answer 1

这很可能是因为您没有在按键事件的回调中调用 event.preventDefault()，因此正在提交表单。

在输入字段上按回车键时执行的默认操作通常是提交包含该字段的表单(尽管 it seems like this may be browser dependent )。调用 event.preventDefault() 会停止任何默认操作的发生，从而让您的代码不受干扰地运行。

Returning false from the callback function has a similar, but not identical, effect.