javascript - 如何停止实时ajax搜索栏上的输入重置

Question

我正在尝试在 keyup 事件上创建一个实时 Ajax 搜索栏。

当我输入一个字符时，页面会更改 url 并重置我的输入文本。当我写更多字符时如何防止页面刷新？

<script type="text/javascript">

    function getSearch(str){


        var u = document.getElementById("search").value;
        if(str.length == 0){
            status.innerHTML =  'field is empty';
        }
        if(u != "") {

            se.onreadystatechange = function(){
                if (se.readyState == 4 && se.status == 200){
                    status.innerHTML = se.responseText;
                }
            }

         }
     }
</script>

Answer 1

您的ajax请求缺少一些配置。您需要告诉请求本身应该调用哪个 url，并指定方法。只需更改这些行:

status.innerHTML = 'Verifying...';
//window.location.replace("search.php?search="+str);
// this is why your page reloads. you want to remove this
var se = new XMLHttpRequest();
se.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
se.onreadystatechange = function(){
    if (se.readyState == 4 && se.status == 200){
        status.innerHTML = se.responseText;
    }
}
se.open('POST',"search.php?search="+str);
// you need to open the request, specifying the method and the url
se.send();

这是一个有趣的read on ajax requests