-2

我正在关注本教程：

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

他们为我提供了我正在寻找的东西。但我面临的唯一问题是，当我按下回车按钮时，页面正在刷新:(但我不想那样做。

演示：

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

代码 

<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 个字符时获取数据。可能吗 ？

4

3 回答 3

0

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

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

于 2013-05-02T14:16:44.553 回答
0

您可以在表单中添加一个提交按钮（并隐藏在您的 CSS 中）并将以下内容放入其中；

<input type="submit" name="submit" value="Submit" onclick="return false;"/>
于 2013-05-02T14:17:09.047 回答
0

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

返回假；

在此行之后：

httpxml.send(null);

和

onkeyup="return ajaxFunction(this.value);"

引入：

onkeyup="ajaxFunction(this.value);"

或者您也可以在表单标签中添加以下内容：

onsubmit="返回假；"

同意@Kolink“如果您不想提交日期，则不需要表单标签

于 2013-05-02T14:21:44.837 回答