Question

我正在使用 NewYorkTimes API从输入字段获取搜索查询，但是，当我在输入后按Enter键时，我的localhost重新加载并导航到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

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

在输入字段上按Enter键时执行的默认操作通常是提交包含该字段的表单（尽管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 /？在输入框中输入

1 个答案: