AJAX基本介绍和简单实例03-----Ajax与数据库的动态应用

初始界面：

选择所有用户后显示的界面：

查询姓名为杜森的客户，结果如下：

Demo03.html代码如下:

     
     
      /*Javascript部分大家应该可以看得懂，如果不明白的话，可以参见前两讲!*/function showCustomer(str){var xmlhttp;    if (str=="")  {  document.getElementById("txtHint").innerHTML="";  return;  }if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;    }  }xmlhttp.open("GET","./Demo03.php?q="+str,true);xmlhttp.send();}
      
        
       请选择一位客户：
        
        
         
          请选择以下客户
          
           所有客户
           
            杜森
            
             邱阳阳
             
              董×××
              
               赵雪妍
               
                张若萍
               
              
             
            
           
          
         
        
       
       
      
     

Demo03.php代码如下:

     connect("localhost","root","","Ajax_demo");//设定字符集为utf8格式$mysqli->set_charset("utf8");$result=$mysqli->query($sql,$conn);$return_str="";$return_str.="
     
      ";$return_str.="
                       
			   
			   
			   
			   
			  
";while(!!$row=$result->fetch_array()){	  $return_str.="
                           
				   
				   
				   
				   
";	}$return_str.="
      
       
        
ID
        
Username
        
Sex
        
address
        
telephone
       
       
        
".$row['id']."
        
".$row['username']."
        
".$row['sex']."
        
".$row['address']."
        
".$row['telephone']."
				       
      
     
";echo $return_str;?>

mysql数据库对应的Sql语句：

-- phpMyAdmin SQL Dump-- version 2.11.2.1-- http://www.phpmyadmin.net---- 主机: localhost-- 生成日期: 2015 年 01 月 31 日 15:18-- 服务器版本: 5.0.45-- PHP 版本: 5.2.5SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";---- 数据库: `ajax_demo`--CREATE DATABASE `ajax_demo` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;USE `ajax_demo`;-- ------------------------------------------------------------ 表的结构 `user_info`--CREATE TABLE `user_info` (  `id` int(10) unsigned NOT NULL auto_increment COMMENT '//用户编号',  `username` varchar(40) NOT NULL COMMENT '//用户姓名',  `sex` varchar(4) NOT NULL COMMENT '//用户性别',  `address` varchar(100) NOT NULL,  `telephone` varchar(11) NOT NULL,  PRIMARY KEY  (`id`),  UNIQUE KEY `username` (`username`)) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=6 ;---- 导出表中的数据 `user_info`--INSERT INTO `user_info` (`id`, `username`, `sex`, `address`, `telephone`) VALUES(1, '杜森', '男', '河南省新乡市新乡县', '13723145623'),(2, '邱阳阳', '男', '河南省信阳市', '13723325623'),(3, '董×××', '女', '河南省周口市', '13723325623'),(4, '张若萍', '女', '河南省洛阳市', '13723325423'),(5, '赵雪妍', '女', '开封市', '13723325423');

提示：如果数据库连接错误，请修改Demo03.php第15行的数据库连接信息，配置成您对应的数据库信息。

如果有什么错误的地方，欢迎的大家指正，如果想了解我更多，可以连接九骥网维工作室微博！