Question

我正在学习本教程：

http://www.plus2net.com/php_tutorial/ajax-search.php

他们为我提供了我正在寻找的东西。但我面临的唯一问题是，当我按下回车键时，页面会令人耳目一新:(但我不想这样做。

样本：

http://www.plus2net.com/php_tutorial/ajax-search-demo.htm

HTML CODE

<html>
<body>
    <style>
        #displayDiv
        {
            background-color: #ffeeaa;
            width: 200;
        }
    </style>
    <script type="text/javascript">
        function ajaxFunction(str) {
            var httpxml;
            try {
                // Firefox, Opera 8.0+, Safari
                httpxml = new XMLHttpRequest();
            }
            catch (e) {
                // Internet Explorer
                try {
                    httpxml = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch (e) {
                    try {
                        httpxml = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    catch (e) {
                        alert("Your browser does not support AJAX!");
                        return false;
                    }
                }
            }
            function stateChanged() {
                if (httpxml.readyState == 4) {
                    document.getElementById("displayDiv").innerHTML = httpxml.responseText;

                }
            }
            var url = "ajax-search-demock.php";
            url = url + "?txt=" + str;
            url = url + "&sid=" + Math.random();
            httpxml.onreadystatechange = stateChanged;
            httpxml.open("GET", url, true);
            httpxml.send(null);
        }
    </script>
    </head>
    <body>
        <form name="myForm">
        <input type="text" onkeyup="ajaxFunction(this.value);" name="username" />
        <div id="displayDiv">
        </div>
        </form>
    </body>
</html>

PHP代码（ajax-search-demock.php）

<?
//***************************************
// This is downloaded from www.plus2net.com //
/// You can distribute this code with the link to www.plus2net.com ///
// Please don't remove the link to www.plus2net.com ///
// This is for your learning only not for commercial use. ///////
//The author is not responsible for any type of loss or problem or damage on using this script.//
/// You can use it at your own risk. /////
//*****************************************
//error_reporting(E_ERROR | E_PARSE | E_CORE_ERROR);
////// Your Database Details here /////////
$dbservertype='mysql';
$servername='127.0.0.1';
$dbusername='test';
$dbpassword='test';
$dbname='sql_tutorial';

////////////////////////////////////////
////// DONOT EDIT BELOW /////////
///////////////////////////////////////

connecttodb($servername,$dbname,$dbusername,$dbpassword);
function connecttodb($servername,$dbname,$dbuser,$dbpassword)
{
  global $link;
  $link=mysql_connect ("$servername","$dbuser","$dbpassword");
  if(!$link){die("Could not connect to MySQL");}
  mysql_select_db("$dbname",$link) or die ("could not open db".mysql_error());
}
///////////////////// Main Code sarts ////////


$in=$_GET['txt'];
$msg="";
if(strlen($in)>0 and strlen($in) <20 ){
  $t=mysql_query("select name, id from student where name like '$in%'");
  while($nt=mysql_fetch_array($t)){
    $msg.=$nt[name]."->$nt[id]<br>";
  }
}
echo $msg;

?>

更新：

确定ENTER的事情已经解决了：D真的很棒!!还有一个请求

我想仅在输入达到8个字符时才获取数据。有可能吗？

Answer 1

您实际上并未提交任何内容，因此从技术上讲，您根本不需要<form>元素，只需将其删除，其余部分保持不变。

或者，如果您是严格标准的坚持者，请在表单上设置action="javascript:void(null)以防止它执行任何操作。

Answer 2

您可以向表单添加提交按钮（并隐藏在CSS中）并将以下内容添加到其中;

<input type="submit" name="submit" value="Submit" onclick="return false;"/>

Answer 3

进行以下更改，它将起作用：

返回false;

这一行之后：

httpxml.send（空）;

和

onkeyup =“return ajaxFunction（this.value）;”

inslead of：

的onkeyup = “ajaxFunction（THIS.VALUE）;”

或者您还可以在表单中添加以下内容：

onsubmit =“return false;”

同意@Kolink“如果您不想提交日期，那么就不需要表格标签

提交页面刷新

3 个答案: