页面导航到 localhost:3000/? on enter 按下输入框

Question

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

我在控制台中 console.log(url) 并且 url 是正确的，因为 JSON 请求 returns 结果，但结果未显示在 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.

页面导航到 localhost:3000/? on enter 按下输入框

Page navigates to localhost:3000/? on enter press in the input box

javascript

jquery

json

api

haml