1.创建数据库
create database ajaxdemo default charset utf8;
切换到当前数据库
use ajaxdemo;
创建表并插入数据
create table `ajaxtest` ( `userid` int(11) not null auto_increment comment '用户id', `username` varchar(50) not null comment '用户名', `userpass` varchar(50) not null comment '密码', `userage` int(11) not null comment '年龄', `usersex` varchar(1) not null comment '性别', primary key (`userid`) ) engine=innodb default charset=utf8;
insert into `ajaxtest` values ('1', '李四', 'lisi', '15', '男'); insert into `ajaxtest` values ('2', '张三', 'lisi', '20', '女'); insert into `ajaxtest` values ('3', '王五', 'lisi', '25', '男'); insert into `ajaxtest` values ('4', '韩梅梅', 'lisi', '25', '男'); insert into `ajaxtest` values ('5', '张莉', 'lisi', '25', '女');
2.创建index.php，查询数据库中的信息并展示给用户
<html> <head> <meta charset="utf-8"/> <title>ajax实例</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body style="height: 800px;"> <p class="container"> <p class="panel panel-default" style="margin-top: 100px;text-align: center;"> <p class="panel-heading"> ajax实例 </p> <p class="panel-body"> <form class="navbar-form navbar-center" role="search" name="myform"> <p class="form-group"> <label> 年龄:<input type="number" class="form-control" placeholder="age" name="userage" id='userage'/> </label> </p> <select class="form-control" id="usersex" name="usersex"> <option value="男">男</option> <option value="女">女</option> </select> <button type="button" class="btn btn-default" onclick='ajaxfunction()'>提交</button> </form> <table class="table table-condensed table-bordered" id="ajaxp"></table> <p>sql语句：<pre id="sql"></pre></p> </p> </p> </p> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script type="text/javascript"> function ajaxfunction() { var xmlhttp; try{ xmlhttp = new xmlhttprequest(); }catch(e){ //ie浏览器需要用activexobject来创建 xmlhttprequest对象 try{ //如果javascript的版本大于5 xmlhttp=new activexobject("msxml2.xmlhttp"); }catch(e){ try{ //如果不是 则使用老版本的activex对象 xmlhttp=new activexobject("microsoft.xmlhttp"); }catch(e){ alert("您的浏览器不支持"); return false; } } } xmlhttp.onreadystatechange=function(){ if(xmlhttp.readystate==4){ var ajaxdata=document.getelementbyid("ajaxp"); var sqldata=document.getelementbyid('sql'); var jsondata=json.parse(xmlhttp.responsetext);//解析json数据 ajaxdata.innerhtml=jsondata.data; sqldata.innerhtml=jsondata.sql; } } var userage=document.getelementbyid('userage').value; var usersex=document.getelementbyid('usersex').value; var url='?userage='+userage; url += '&usersex='+usersex; xmlhttp.open("get","ajaxtest.php"+url,true); xmlhttp.send(); } </script> </body> </html>>
3.创建ajaxtest.php来响应index.php的请求
<?php error_reporting(0);//不显示警告信息 $dbhost="localhost"; $dbuser="root"; $dbpass="root"; $dbname="ajaxdemo"; $mysqli=new mysqli($dbhost,$dbuser,$dbpass,$dbname); $mysqli->query("set names 'utf8' "); $userage=$_get['userage']; $usersex=$_get['usersex']; $userage=$mysqli->real_escape_string($userage); $usersex=$mysqli->real_escape_string($usersex); $query="select * from ajaxtest where usersex='$usersex'"; if(is_numeric($userage)) { $query .="and userage <= $userage;"; } $qry_result=$mysqli->query($query); if($qry_result->num_rows==0) { echo json_encode(['data'=>'<h2>未找到符合条件的记录</h2>','sql'=>$query]); return ; } $display_string ="<tr>"; $display_string .="<td>用户名</td>"; $display_string .="<td>年龄</td>"; $display_string .="<td>性别</td>"; $display_string .="</tr>"; //insert a new row in the table for each person returned while($row=mysqli_fetch_object($qry_result)){ $display_string.="<tr>"; $display_string.="<td>$row->username</td>"; $display_string.="<td>$row->userage</td>"; $display_string.="<td>$row->usersex</td>"; $display_string.="</tr>"; } echo json_encode(['data'=>$display_string,'sql'=>$query]);//返回json数据格式 ?>
结果：
相关推荐：
php读取数据库并按照中文名称进行排序实现代码_php教程
以上就是ajax+php+mysql 读取数据库的简单示例 的详细内容。