-2

私はこのチュートリアルに従っています：

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

彼らは私が探しているものを提供してくれました。しかし、私が直面している唯一の問題は、Enterボタンを押すと、ページが更新されることです:(しかし、私はそれをしたくありません.

デモ：

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

HTMLコード 

<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 本当に素晴らしいです!!.. もう 1 つリクエストをお願いします

入力が8文字に達したときだけデータを取得したい。出来ますか ？

4

3 に答える 3

0

送信ボタンをフォームに追加して (そして CSS で非表示にして)、次のように入力できます。

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

実際には何も送信していないため、技術的には要素はまったく必要ありません<form>。削除して残りをそのままにしておきます。

または、厳格な基準にこだわる場合はaction="javascript:void(null)、フォームを設定して何もしないようにします。

于 2013-05-02T14:16:44.553 に答える