0

您好，我正在使用此代码。我有一个问题。当我在我的输入框中输入输入时，它很好。但是当我按 Enter 时，页面会刷新一秒钟，输入框会自动清除。

    <script>
        function book_suggestion() {
            var book = document.getElementById("book").value;
            var xhr;
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            var data = "book_name=" + book;
            xhr.open("POST", "book-suggestion.php", true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(data);
            xhr.onreadystatechange = display_data;

            function display_data() {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        document.getElementById("suggestion").innerHTML = xhr.responseText;
                    } else {
                        alert('There was a problem with the request.');
                    }
                }
            }
        }
    </script>
4

2 回答 2

1

您的页面重新加载的原因是<form>元素抓住了enter压力。

赶上enter媒体将提交表格。

提交没有action=""属性的表单将提交到同一页面。

提交到不处理请求的页面只会重新加载页面，并且您的表单输入将重置为空白。

要解决此问题，请使用 javascript 来禁用输入时提交，以捕获等于13并返回 false 或取消事件的按键。

<input type=text id=book onKeyUp="book_suggestion( event )">

... [snip] ...  

function book_suggestion( e ){
    if( e.which == 13 ){
        e.preventDefault();
        e.stopPropagation();
        return false;
    }

    ... [snip your code] ...

这应该够了吧。

对于它的价值，Stack Overflow 上的人通常不喜欢根据您的要求修改您的代码。这是一个简单的修复，可以通过谷歌搜索关键字（“catch keypress”、“cancel event”等）找到。

于 2013-04-16T18:13:34.910 回答
0

如果我理解你，你想提交自己的表单数据。您应该false在book_suggestion()函数内返回。并添加onsubmit到<form>元素。确保它应该有return。像那样：

<form onsubmit="return book_suggestion();">
于 2013-04-16T20:48:13.373 回答