php随笔2-php+ajax 实现输入读取数据库显示匹配信息，2-phpajax_PHP教程
- WBOY原創
- 2016-07-12 09:07:431091瀏覽
php随笔2-php+ajax 实现输入读取数据库显示匹配信息，2-phpajax
dropbox_index.php
<span><!</span><span>DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span><span>></span>
<span><</span><span>html </span><span>xmlns</span><span>="http://www.w3.org/1999/xhtml"</span><span>></span>
<span><</span><span>head</span><span>></span>
<span><</span><span>meta </span><span>http-equiv</span><span>="Content-Type"</span><span> content</span><span>="text/html; charset=gb2312"</span> <span>/></span>
<span><</span><span>title</span><span>></span>主搜索引擎下拉框自动显示数据<span></</span><span>title</span><span>></span>
<span></</span><span>head</span><span>></span>
<span><</span><span>script </span><span>src</span><span>="js/dropbox.js"</span><span> type</span><span>="text/javascript"</span><span>></</span><span>script</span><span>></span>
<span><</span><span>link </span><span>href</span><span>="css/dropbox.css"</span><span> type</span><span>="text/css"</span><span> rel</span><span>="stylesheet"</span><span>/></span>
<span><</span><span>body</span><span>></span>
<span><</span><span>form </span><span>action</span><span>=""</span><span> method</span><span>="post"</span><span> enctype</span><span>="multipart/form-data"</span><span>></span>
<span><</span><span>input </span><span>name</span><span>="txt"</span><span> id</span><span>="txt"</span><span> class</span><span>="txt"</span><span> type</span><span>="text"</span><span> onkeyup </span><span>="showHint(this.value)"</span> <span>/></span>
<span><</span><span>input </span><span>type</span><span>="submit"</span><span> class</span><span>="btn"</span><span> name</span><span>="submit"</span><span> value</span><span>="Upload"</span> <span>/><</span><span>br </span><span>/></span>
<span><</span><span>span </span><span>id</span><span>="txtHint"</span><span> class</span><span>="file-box"</span><span>></</span><span>span</span><span>></span>
<span></</span><span>form</span><span>></span>
<span></</span><span>body</span><span>></span>
<span></</span><span>html</span><span>></span>
dropbox.js ajax
<span>var</span><span> xmlHttp
</span><span>function</span><span> showHint(str)
{
</span><span>if</span> (str.length==0<span>)
{
document.getElementById(</span>"txtHint").innerHTML=""
<span>return</span><span>
}
xmlHttp</span>=<span>GetXmlHttpObject()
</span><span>if</span> (xmlHttp==<span>null</span><span>)
{
alert (</span>"Browser does not support HTTP Request"<span>)
</span><span>return</span><span>
}
</span><span>var</span> url="responsepage.php"<span>
url</span>=url+"?q="+<span>str
url</span>=url+"&sid="+<span>Math.random()
xmlHttp.onreadystatechange</span>=<span>stateChanged
xmlHttp.open(</span>"GET",url,<span>true</span><span>)
xmlHttp.send(</span><span>null</span><span>)
}
</span><span>//</span><span>设置回调函数</span>
<span>function</span><span> stateChanged()
{
</span><span>if</span> (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"<span>)
{
document.getElementById(</span>"txtHint").innerHTML=<span>xmlHttp.responseText
}
}
</span><span>function</span><span> GetXmlHttpObject()
{
</span><span>var</span> xmlHttp=<span>null</span><span>;
</span><span>try</span><span>
{
</span><span>//</span><span> Firefox, Opera 8.0+, Safari</span>
xmlHttp=<span>new</span><span> XMLHttpRequest();
}
</span><span>catch</span><span> (e)
{
</span><span>//</span><span> Internet Explorer</span>
<span>try</span><span>
{
xmlHttp</span>=<span>new</span> ActiveXObject("Msxml2.XMLHTTP"<span>);
}
</span><span>catch</span><span> (e)
{
xmlHttp</span>=<span>new</span> ActiveXObject("Microsoft.XMLHTTP"<span>);
}
}
</span><span>return</span><span> xmlHttp;
}</span>
dropbox.css
<span>.txt</span>{<span> height</span>:<span>22px</span>;<span> border</span>:<span>1px solid #cdcdcd</span>;<span> width</span>:<span>220px</span>;<span>border-right</span>:<span>none</span>;}<span>
.btn</span>{<span> background-color</span>:<span>#FFF</span>;<span> border</span>:<span>1px solid #CDCDCD</span>;<span>height</span>:<span>26px</span>;<span> width</span>:<span>70px</span>;}
responsepage.php
<?<span>php
</span><span>//</span><span>get the q parameter from URL </span>
<span>$q</span>=<span>$_GET</span>["q"<span>];
</span><span>//</span><span>全部小写化</span>
<span>$q</span>=<span>strtolower</span>(<span>$q</span><span>);
</span><span>//</span><span>非空验证</span>
<span>if</span>(<span>isset</span>(<span>$q</span>) && <span>$q</span> != ''<span>)
{
</span><span>$con</span> = <span>mysql_connect</span>("localhost","root","lifu"<span>);
</span><span>if</span>(!<span>$con</span><span>)
{
</span><span>die</span>('Could not connect: ' .<span>mysql_error</span><span>());
}
</span><span>mysql_select_db</span>("my_db",<span>$con</span><span>);
</span><span>$sql</span> = "select * from persons"<span>;
</span><span>//</span><span>$sql="SELECT FirstName FROM Persons where Firstname like '%$q%'";</span>
<span>$result</span> =<span>mysql_query</span>(<span>$sql</span>,<span>$con</span><span>);
</span><span>while</span>(<span>$row</span> = <span>mysql_fetch_array</span>(<span>$result</span><span>))
{
</span><span>//</span><span>匹配判断</span>
<span>if</span>(<span>stristr</span>(<span>strtolower</span>(<span>$row</span>['FirstName']),<span>$q</span><span>))
{
</span><span>//</span><span>echo "-----------------Persons-----------------";</span>
<span>echo</span> <span>/*</span><span> "firstname:" .</span><span>*/</span> <span>$row</span>['FirstName'] . "<br />"<span>;
</span><span>//</span><span>echo "lastname:" . $row['LastName'] . "<br />";
//echo "age:" . $row['Age'] . "<br />";</span>
<span> }
</span><span>//</span><span>echo $row['FirstName'] . "<br />";</span>
<span>
}
</span><span>mysql_close</span>(<span>$con</span><span>);
}
</span>?>
数据库：
结果：
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn