简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
ホームページ
記事
に質問
コース
特集
ダウンロード
ゲーム
辞書
最近の更新

ホームページ  >  記事  >  php教程  >  ajax,php和MySQL实现带Suggest功能的在线英语词典

ajax,php和MySQL实现带Suggest功能的在线英语词典

PHP中文网
PHP中文网オリジナル
2016-05-25 17:10:591950ブラウズ

1. [代码][PHP]代码     

<?
include "linkdb.php";
header("Content-type:text/html;charset=utf-8");
$word=$_GET["word"];
$search=$_GET["searc"];
$sqlstr="SELECT * from word where word=&#39;".$word."&#39;";
$rst=mysql_query($sqlstr);
list($word,$exp)=mysql_fetch_row($rst);
echo &#39;
<em>&#39;.$word.&#39;</em><br/><p>&#39;.$exp.&#39;</p>
&#39;;
if($word==&#39;&#39;){
echo &#39;
<p>查无记录……</p>
&#39;;
	}
?>


2. [代码][PHP]代码

<?
/////////linkdb.php//////////
/////////link database///////
$mydb=mysql_pconnect(&#39;localhost&#39;,&#39;root&#39;,&#39;lijun&#39;);
mysql_query("SET NAMES &#39;utf8&#39;");
if(!$mydb)
{
	//echo "连结失败....";
}else{
	//echo "连接成功....";
}
$db=mysql_select_db(&#39;mydatautf8&#39;,$mydb);
if($db){
	//echo "数据库连接正确...";
}else{
	//echo "数据库连结错误....";
}
?>


3. [文件]     dicsug.php 

<?
///////////词典suggest响应页面/////////////
include "linkdb.php";
header("Content-type:text/html;charset=gb2312");
$word=$_GET["word"];
$sqlstr="SELECT word from word where word like &#39;".$word."%&#39;";
$rst=mysql_query($sqlstr);
$i=0;
$w[&#39;0&#39;]=&#39;&#39;;
$w[&#39;1&#39;]=&#39;&#39;;
$w[&#39;2&#39;]=&#39;&#39;;
$w[&#39;3&#39;]=&#39;&#39;;
$w[&#39;4&#39;]=&#39;&#39;;
$w[&#39;5&#39;]=&#39;&#39;;
$w[&#39;6&#39;]=&#39;&#39;;
$w[&#39;7&#39;]=&#39;&#39;;
$w[&#39;8&#39;]=&#39;&#39;;
$w[&#39;9&#39;]=&#39;&#39;;
while(($row=mysql_fetch_row($rst))&&$i<=9){
	list($w[&#39;&#39;.$i.&#39;&#39;])=mysql_fetch_row($rst);
	$i++;
	}
echo $w["0"].&#39; &#39;.$w["1"].&#39; &#39;.$w["2"].&#39; &#39;.$w["3"].&#39; &#39;.$w["4"].&#39; &#39;.$w["5"].&#39; &#39;.$w["6"].&#39; &#39;.$w["7"].&#39; &#39;.$w["8"].&#39; &#39;.$w["9"];
?>


4. [代码][PHP]代码   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>四级查词</title>
<style type="text/css">
#inputf {
	position: absolute;
	left: 10px;
	top: 9px;
	width: 419px;
	height: 33px;
	z-index: 1;
	border: #CCC 2px solid;
}
#word {
	background-color: #FFF;
	width:418px;
	height:32px;
	border:hidden 0;
	font-family:微软雅黑,Arial;
	font-size:24px;
}
#suggest {
	position: absolute;
	left: 10px;
	top: 46px;
	width: 421px;
	height: 273px;
	z-index: 3;
	border-right: #999 1px solid;
	border-bottom: #999 1px solid;
	border-left: #999 1px solid;
	font-size: 16px;
	font-family: 微软雅黑,Arial;
	visibility: hidden;
	cursor: default;
}
#outerf {
	position: absolute;
	margin: -100 auto;
	width: 605px;
	height: 300px;
	z-index: 2;
	border-radius: 10px;
	border: #0CF 1px solid;
	left: -76px;
	top: 59px;
	visibility: visible;
}
#rstf em{
	font-size:18px;
	font-family:Arial, Helvetica, sans-serif;
	color:#06F;
	}
#rstf p{
	font-family:楷体,微软雅黑;
	font-size:18px;
	}
#btn {
	position: absolute;
	left: 448px;
	top: 6px;
	width: 40px;
	height: 40px;
	z-index: 6;
	border-radius: 20px;
	background-image: url(image/%E6%90%9C.gif);
	background-position: 0 0;
	visibility: visible;
}
#main {
	position: relative;
	margin:0 auto;
	width: 442px;
	height: 366px;
	z-index: 5;
}
#rstf {
	position: absolute;
	left: 17px;
	top: 11px;
	width: 572px;
	height: 279px;
	z-index: 6;
}
#bt {
	position: absolute;
	left: 454px;
	top: 15px;
	width: 30px;
	height: 22px;
	z-index: 4;
	visibility: hidden;
}
</style>
<script type="text/javascript">
function init(){
	document.getElementById("btn").style.visibility=&#39;visiable&#39;;
	document.getElementById("bt").disabled=false;
	}
</script>
</head>

<body onload="init()">
<p id="main">
    <p id="suggest">
      <table width="421" height="273" border="0">
        <tr id="10" onmouseover="float(this)">
          <td id="0"> </td>
        </tr>
        <tr id="11" onmouseover="float(this)">
          <td id="1"> </td>
        </tr>
        <tr id="12" onmouseover="float(this)">
          <td id="2"> </td>
        </tr>
        <tr id="13" onmouseover="float(this)">
          <td id="3"> </td>
        </tr>
        <tr id="14" onmouseover="float(this)">
          <td id="4"> </td>
        </tr>
        <tr id="15" onmouseover="float(this)">
          <td id="5"> </td>
        </tr>
        <tr id="16" onmouseover="float(this)">
          <td id="6"> </td>
        </tr>
        <tr id="17" onmouseover="float(this)">
          <td id="7"> </td>
        </tr>
        <tr id="18" onmouseover="float(this)">
          <td id="8"> </td>
        </tr>
        <tr id="19" onmouseover="float(this)">
          <td id="9"> </td>
        </tr>
      </table>
    </p>
    <p id="outerf">
        <p id="rstf"></p>
    </p>
    <p id="btn" onmouseover="btnani()" onclick="searchw()"></p>

      <p id="inputf">
        <label for="word"></label>
        <input type="text" onkeyup="suggest()" name="word" id="word" value="" />
      </p>
      

</p>
</body>
</html>
<script type="text/javascript">
var msInSug=0;
function doit(str){
	//用正则表达式将获取是数据提取为数组或变量组并且填充到相应的表格内
	reg=/\b\w+\b/g;
	var arr=str.match(reg);
	for(i=0;i<10;i++){
		document.getElementById(&#39;&#39;+i+&#39;&#39;).innerHTML=(arr[i]=(arr[i])?arr[i]:&#39;&#39;)+&#39;&#39;;
		}
	}
function float(obj){
	obj.style.backgroundColor="#CCC";
	obj.onmouseout=function(){
		obj.style.backgroundColor="";
		};
	mschoose(obj);
	}
function suggest(){
	try{xmlhttp=new XMLHttpRequest;}catch(e){
		try{xmlhttp=new ActiveXObject("microsoft,xmlhttp");}catch(e){
			xmlhttp=new ActiveXObject("msxml2,xmlhttp");
			}
		}
	var word=document.getElementById("word").value;
	xmlhttp.onreadystatechange=function(){
		if(xmlhttp.readyState==4&&xmlhttp.status==200){
			doit(xmlhttp.responseText);
			}
		};
	xmlhttp.open("GET","dicsug.php?word="+word);
	xmlhttp.send();
	document.getElementById("suggest").onmouseover=function(){msInSug=1};
	document.getElementById("suggest").style.visibility=&#39;visible&#39;;
	document.getElementById("word").onblur=function(){
		if(msInSug==1){
			document.getElementById("suggest").style.visibility=&#39;hidden&#39;;
			}
		}
	}
//////////鼠标离开Sug/////////
function msoutsug(){
	msInSug=0;
	}
//////////鼠标选择////////////
function mschoose(ite){
	//各建议项的click事件
	//alert("事件来自："+ite);
	//正则处理
	var str=ite.innerHTML;
	var reg1=/>\w+</;
	var str1=str.match(reg1);
	str1+=&#39;&#39;;//匹配结果不能直接拿来当作被匹配字符串，要先将其转换为字符串
	var reg2=/\w+/;
	var str2=str1.match(reg2);
	document.getElementById("word").value=(str2=(str2==&#39;null&#39;)?&#39;&#39;:str2);//////////////
	}
///////开始查询//////////////
///////////////////////////
function searchw(){
	check();
	var word=document.getElementById("word").value;
	try{xmlhttp1=new XMLHttpRequest;}catch(e){
		try{xmlhttp1=new ActiveXObject(&#39;microsoft,xmlhttp&#39;);}catch(e){
			xmlhttp1=new ActiveXObject(&#39;msxml2,xmlhttp&#39;);
			}
		}
	xmlhttp1.onreadystatechange=function(){
		if(xmlhttp1.readyState==4&&xmlhttp1.status==200){
			document.getElementById("rstf").innerHTML=xmlhttp1.responseText;
			}
		};
	xmlhttp1.open("GET","dictionary.php?searc=search&word="+word);
	xmlhttp1.send();
	}
</script>
<script type="text/javascript">
function btnani(){
	document.getElementById("btn").style.backgroundPosition=&#39;-40px 0&#39;;
	document.getElementById("btn").onmouseout=function(){this.style.backgroundPosition=&#39;0 0&#39;;}
	}
function check(){
	if(document.getElementById("word").value==&#39;&#39;){
		alert("请输入单词！");
		return false;
		};
	}
</script>
<script type="text/javascript">
t=10;
	function bodyonload(){
		if(event.keyCode==13){
			document.getElementById("btn").onclick;
			}else if(event.keyCode==40){
				if(t>19){t=19;}
				var ite=document.getElementById(t+&#39;&#39;);
				t++;
				float(ite);
				document.getElementById(t+&#39;&#39;).onmouseout;
				}else if(event.keyCode==38){
					if(t<10){t=10;}
					var ite=document.getElementById(t+&#39;&#39;);
					t--;
					}
		}
</script>

           

5. [图片] printscreen1.png    

           

ajax,php和MySQL实现带Suggest功能的在线英语词典

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：PHP根据图片色界在不同位置加水印的方法次の記事：靠频繁刷新实现的图片数字时钟，很傻的方法，仅供娱乐。。。

関連記事

続きを見る