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);
   }
?>

数据库：

以上就是本文给大家介绍的php+ajax 实现输入读取数据库显示匹配信息的全部内容，希望大家喜欢。

赞 (0)

相关推荐

  • ajax php 实现写入数据库

    首先需要一个带输入表格. 复制代码 代码如下: <!-- To change this template, choose Tools | Templates and open the template in the editor. --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title

  • Ajax PHP 边学边练 之三 数据库

    Ajax PHP 边学边练 之三 数据库

    本篇将继续通过该实例讲解与数据库的交互方式.实例中用到的是MySQL,也可以根据自己的需要替换为其他数据库,其连接方式可以参考PHP相关手册. 在下面源程序包中dbconnector.php 提供了与MySQL的连接函数. 复制代码 代码如下: <?php //定义数据连接变量 define ("MYSQLHOST", "localhost"); define ("MYSQLUSER", "root"); define

  • php+ajax 实现输入读取数据库显示匹配信息

    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>

  • Ajax+Asp源代码]读取数据库内容的表格(没有用框架)第1/2页

    功能: 读取数据库内容的表格.读取数据方式为ajax,分页也是.代码写得不好.呵呵.供一些学习ajax的朋友参考参考.如有不妥请大家跟贴纠正.我会根据大家的提议不断修正代码. 目前还有一个小问题,如果有朋友有兴趣帮我解决一下在下不胜感激 你翻到最后一页的时候如果只有一行会出现空白和undefined.这个问题我试了很多方法一直没有很妥当的解决. 注:下面一些地方出现笑脸表情的是 大写的d 其实很多地方都可以根据asp文件中输出的字符来控制.目前还没有往那方面完善.比如说一列显示多少行等. Asp

  • 读取数据库的数据并整合成3D饼图在jsp中显示详解

    读取数据库的数据并整合成3D饼图在jsp中显示详解

    前言 本文主要给大家介绍的是关于读取数据库数据整合成3D饼图并在jsp中显示的相关内容,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍: 方法如下: 首先我将生成饼图的方法独立写成一个PieChar.java类,详细代码如下:(数据库需要自己建,如有需要的话) import java.io.IOException; import java.sql.SQLException; import org.jfree.chart.ChartFactory; import org.jfree.c

  • AJAX+JSP实现读取XML内容并按排列显示输出的方法示例

    本文实例讲述了AJAX+JSP实现读取XML内容并按排列显示输出的方法.分享给大家供大家参考,具体如下: 实现功能:点击按扭,显示出JSP页面中通过out.println传过来的xml信息 一.含XML的JSP页面 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% response.setContentType("text/x

  • jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解

    jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解

    本文使用jQuery,结合PHP和Mysql,通过实例讲解如何实现Ajax数据加载效果. HTML <div id="list"> <ul></ul> </div> <div id="pagecount"></div> 页面中,#list用来展示数据列表,包括本例要展示的商品图片和标题,#pagecount用来展示分页条,即本例中的上一页.下一页. 当然,别忘了,在head中预先载入jquery

  • 使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例

    首先我们需要先建立好数据库,将一些数据插入进去 需要两张表: province:省份表 city: 城市表 如图: 然后再在java中建立相关的实体类与之对应 再然后,我们就能开始做jdbc的操作了 public class ConnectionFactory { private static String driver; private static String url; private static String user; private static String password;

  • php + ajax 实现的写入数据库操作简单示例

    php + ajax 实现的写入数据库操作简单示例

    本文实例讲述了php+ ajax 实现的写入数据库操作.分享给大家供大家参考,具体如下: 这个是最简单的表单提交  延伸:后面有很多需要提交的信息 如何快速部署接口 此例子是移动端H5页面,使用的是zepto.min.js HTML <input class="name" type="text" placeholder="请输入您的姓名" id="name"> <input class="tel&q

  • ajax提交手机号去数据库验证并返回状态值

    本文实例为大家分享了ajax提交手机号去数据库的具体代码,并返回状态值,供大家参考,具体内容如下 <script type="text/javascript"> $(function(){ $('.agree_regi').click(function(){ var phone = $.trim($("#phone").val()); if(phone == ""){ NewAlert(2,"请输入手机号",nul

  • 使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页

    使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页

    先给大家展示下运行效果图:  1.后台action产生json数据. List blackList = blackService.getBlackInfoList(mobileNum, gatewayid, startDate, endDate); int totalRows = blackList.size(); StringBuffer sb = new StringBuffer(); sb.append("{\"totalCount\":\""+to

  • JS输入用户名自动显示邮箱后缀列表的方法

    本文实例讲述了JS输入用户名自动显示邮箱后缀列表的方法.分享给大家供大家参考.具体如下: 以下是代码,保存到html文件打开: 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>输入用户名自动显示邮箱后缀列表</title> <script type="text/javascript" src=&q

随机推荐