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

dropbox_index.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=gb2312" />
<title>主搜索引擎下拉框自动显示数据</title>
</head>
<script src="js/dropbox.js"  type="text/javascript"></script>
<link  href="css/dropbox.css" type="text/css" rel="stylesheet"/>
<body>
<form action="" method="post" enctype="multipart/form-data">
                <input name="txt" id="txt" class="txt" type="text" onkeyup ="showHint(this.value)"  />
                <input type="submit" class="btn" name="submit" value="Upload" /><br />
                <span id="txtHint" class="file-box"></span>
</form>
</body>
</html>

dropbox.js    ajax

        var xmlHttp

        function showHint(str)
        {
            if (str.length==0)
            {
              document.getElementById("txtHint").innerHTML=""
              return
            }
            xmlHttp=GetXmlHttpObject()
            if (xmlHttp==null)
              {
                  alert ("Browser does not support HTTP Request")
                  return
              }
            var url="responsepage.php"
            url=url+"?q="+str
            url=url+"&sid="+Math.random()
            xmlHttp.onreadystatechange=stateChanged
            xmlHttp.open("GET",url,true)
            xmlHttp.send(null)
        } 

        //设置回调函数
        function stateChanged()
        {
            if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
             {
                document.getElementById("txtHint").innerHTML=xmlHttp.responseText
             }
        }

        function GetXmlHttpObject()
        {
            var xmlHttp=null;
            try
             {
                 // Firefox, Opera 8.0+, Safari
                 xmlHttp=new XMLHttpRequest();
            }
            catch (e)
            {
                 // Internet Explorer
                 try
                  {
                    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                  }
                 catch (e)
                  {
                    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                  }
             }
            return xmlHttp;
        }

dropbox.css

.txt{ height:22px; border:1px solid #cdcdcd; width:220px;border-right:none;}
.btn{ background-color:#FFF; border:1px solid #CDCDCD;height:26px; width:70px;}

responsepage.php

<?php
    //get the q parameter from URL
    $q=$_GET["q"];
    //全部小写化
    $q=strtolower($q);

    //非空验证
    if(isset($q) && $q != ‘‘)
    {
        $con = mysql_connect("localhost","root","lifu");
        if(!$con)
        {
            die(‘Could not connect: ‘ .mysql_error());
        }
        mysql_select_db("my_db",$con);

        $sql = "select * from persons";
        //$sql="SELECT FirstName FROM  Persons where Firstname like  ‘%$q%‘";

        $result =mysql_query($sql,$con);

        while($row = mysql_fetch_array($result))
         {

              //匹配判断
              if(stristr(strtolower($row[‘FirstName‘]),$q))
             {
                  //echo "-----------------Persons-----------------";
                 echo /* "firstname:" .*/ $row[‘FirstName‘] . "<br />";
                 //echo "lastname:" . $row[‘LastName‘] . "<br />";
                 //echo "age:" . $row[‘Age‘] . "<br />";
              }

              //echo  $row[‘FirstName‘] . "<br />";

         }
        mysql_close($con);
     }
?>

数据库:

结果:

时间: 2024-08-28 10:29:06

php随笔2-php+ajax 实现输入读取数据库显示匹配信息的相关文章

JSP 实现 之 读取数据库显示图片

用JSP从数据库中读取图片并显示在网页上 环境mysql+tomcat: <1>先在mysql下建立如下的table. 并insert图像. mysql.sql文件如下: CREATE TABLE photo ( photo_no int(6) unsigned NOT NULL auto_increment, image blob, PRIMARY KEY (`photo_no`) ) <2>把show.jsp放在tomcat的任意目录下. show.jsp作用:从数据库中读出b

10、使用TCP协议完成一个客户端一个服务器。客户端从键盘输入读取一个字符串,发送到服务器。 服务器接收客户端发送的字符串,反转之后发回客户端。客户端接收并打印。

/**10.使用TCP协议完成一个客户端一个服务器.客户端从键盘输入读取一个字符串,发送到服务器. 服务器接收客户端发送的字符串,反转之后发回客户端.客户端接收并打印. * 客户端*/ import java.io.*; import java.net.*; public class Test10_Client { public static void main(String[] args) throws Exception { Socket s = new Socket("192.168.0.

如何用ajax写分页查询(以留言信息为例)-----2017-05-17

要写分页,首先你得清楚,一页你想显示多少条信息?如何计算总共显示的页数? 先说一下思路: (1)从数据库读取数据,以chenai表为例,读取所有留言信息.并能够实现输入发送者,可以查询该发送者的留言总数. (2)计算分页信息,此处,以每页显示5条信息为例.分页列表(如图)以当前页为中心,向前显示2条,向后显示2条. (3)给每个分页列表添加对应的点击事件. (4)能够实现分页后,添加查询分页功能. 现实效果图: 第一步:引入 jquery文件和bootstrap文件.(因为表格和分页均是用的bo

cas-简单的验证cas服务器登录和读取数据库账号密码登录

环境win8+tomcat7+jdk7+cas-server-4.0.0-release 1. 首先到 http://downloads.jasig.org/ 地址下载 cas-server-4.0.0-release.zip,解压后到modules目录中找到cas-server-webapp-4.0.0.war,复制到tomcat的webapp目录下,修改名称为cas.war 2. (1)创建证书 keytool -genkey -alias mycas -keyalg RSA -keysiz

java 读取并且显示 txt 文件

系统:mac os x 10.9 eclipse 在eclipse 中建立一个project, 命名为Cin_txt, Cin_txt的内容 test wang hello world 以下是输入的代码 import java.io.File; import java.io.FileInputStream; import java.io.IOException; public class Cin_txt { public static void main(String[] args) { Fil

51单片机实现对24C02进行页写、顺序读取并显示验证

源:51单片机实现对24C02进行页写.顺序读取并显示验证 //************************************************************************************* //**程序名称:51单片机实现对24C02进行页写.顺序读取并显示验证 //**编写人:**** //**修改人:**** //**程序目的:熟悉I2C总线协议,实现51模拟I2C时序和24C02通信 //**功能描述:51单片机将8个字节数据写入24C02的一

Clementine读取数据库文件

看了一些网上写的资料,不太熟悉数据库和ODBC,只是总结下如何读取. Clementine读取数据库文件,该数据库文件时Access数据库文件. 第一步,建立数据源 win7系统下,win+R后输入odbcad32,出现ODBC数据管理器,在系统DSN中选择添加 打开数据源配置,发现只有SQLServer的驱动,其他的都没有了. 解决方法是: C:\Windows\SysWOW64 在这个目录下找到: odbcad32.exe 这个文件,双击打开.在网上看到的,没有试验. 输入数据源名,在数据库

[Xcode10 实际操作]九、实用进阶-(8)实现App的Setting设置:添加和读取程序的配置信息

本文将演示如何实现添加和读取程序的配置信息. 在项目文件夹[DemoApp]上点击鼠标右键->[New File]创建一个设置束文件 ->[Settings Bundle]设置束: 如果想要通过设备的[设置]程序,来展示自定义的的偏好设置,必须先准备好一个设置束 ->[Next]->[Save As]:Setting.bundle保持默认的配置. ->保存默认的存储位置点击[Create] 在项目导航区多了一个设置束文件[Setting.bundle]. 点击下拉箭头,查看设

读取数据库pymysql

# 读取数据库 # 链接数据库 # 创建一个查询页 # 输入sql语句 # 查询 # 查看结果 # 关闭查询页 # 关闭数据库 import pymysql class ReadMysql: def __init__(self): self.mysql = pymysql.connect(host='', user='', password='', charset='utf8', port=3306) self.cursor = self.mysql.cursor() def fetch_one