php随笔2-php+ajax 实现输入读取数据库显示匹配信息，2-phpajax

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>?>

数据库：

 结果：