ajax+php+mysql 读取数据库的简单示例

原创 2018年04月16日 19:52:29

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;">
		<div class="container">
			<div class="panel panel-default" style="margin-top: 100px;text-align: center;">
				<div class="panel-heading">
					Ajax实例
				</div>
				<div class="panel-body">
					<form class="navbar-form navbar-center" role="search" name="myform">
						<div class="form-group">
							<label>
								年龄:<input type="number" class="form-control" placeholder="Age" name="userage" id='userage'/>
							</label>
						</div>
						<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="ajaxDiv"></table>
					<p>SQL语句:<pre id="sql"></pre></p>
				</div>
			</div>
		</div>
		
		
		<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("ajaxDiv");
						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数据格式
?>


结果:



Ajax程序开发经典实例视频教程

AJAX即“Asynchronous Javascript And XML”,是指一种创建交互式网页应用的网页开发技术。 AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
  • 2016年10月13日 15:00

PHP+MySQL+AJAX+JSON简单实例

建立数据库: DROP SCHEMA IF EXISTS tt; CREATE SCHEMA IF NOT EXISTS tt; USE tt; DROP TABLE IF EXISTS t_c...
  • u012071811
  • u012071811
  • 2017-02-14 19:00:07
  • 1254

Python简单数据库实现

本篇文章主要就是针对python  连接数据库的入门,是我整理的慕课网上老师的视频以及代码,仅供初学者们参考哈哈哈哈(代码自己适当加入了一些修改) 慕课网网视频链接:http://www.imooc...
  • qq_20757285
  • qq_20757285
  • 2016-11-04 20:39:37
  • 228

access数据库简单例子

  • 2015年04月27日 10:06
  • 97KB
  • 下载

C#实现数据库事务处理的简单示例代码

      ...
  • cooolchen
  • cooolchen
  • 2007-02-21 23:35:00
  • 622

Python简单读取json文件功能示例

本文实例讲述了Python简单读取json文件功能。分享给大家供大家参考,具体如下: read_json.json: { "rule":{ "namespace":"strat...
  • mp624183768
  • mp624183768
  • 2018-03-22 02:41:26
  • 28

ORACLE示例数据库脚本

  • 2012年12月31日 17:34
  • 278KB
  • 下载

数据库的例子

  • 2013年12月26日 15:26
  • 638KB
  • 下载

C#图片存入数据库与读取操作示例

  • 2007年08月27日 13:22
  • 6KB
  • 下载

VCSQL数据库应用系统开发与实例1

  • 2009年11月24日 21:08
  • 9.89MB
  • 下载
收藏助手
不良信息举报
您举报文章:ajax+php+mysql 读取数据库的简单示例
举报原因:
原因补充:

(最多只允许输入30个字)