AJAX 与 MySQL

AJAX 可用来与数据库进行交互式通信。

AJAX 数据库实例

下面的实例将演示网页如何通过 AJAX 从数据库读取信息：

实例

 
Select a person:
 
Peter Griffin
 
Lois Griffin
 
Joseph Swanson
 
Glenn Quagmire

选择对应选项，用户信息会显示在这……

实例解释 - MySQL 数据库

在上面的实例中，我们使用的数据库表如下所示：

id FirstName LastName Age Hometown Job
1 Peter Griffin 41 Quahog Brewery
2 Lois Griffin 40 Newport Piano Teacher
3 Joseph Swanson 39 Quahog Police Officer
4 Glenn Quagmire 41 Quahog Pilot

实例解释 - HTML 页面

当用户在上面的下拉列表中选择某位用户时，会执行名为 "showUser()" 的函数。该函数由 "onchange" 事件触发：

<html>

<head>

<script>

function showUser(str)

{

	if (str=="")

	{

		document.getElementById("txtHint").innerHTML="";

		return;

	}

	if (window.XMLHttpRequest)

	{

		// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

		xmlhttp=new XMLHttpRequest();

	}

	else

	{

		// 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","getuser.php?q="+str,true);

	xmlhttp.send();

}

</script>

</head>

<body>

<form>

<select name="users" onchange="showUser(this.value)">

<option value="">Select a person:</option>

<option value="1">Peter Griffin</option>

<option value="2">Lois Griffin</option>

<option value="3">Glenn Quagmire</option>

<option value="4">Joseph Swanson</option>

</select>

</form>

<br>

<div id="txtHint"><b>Person info will be listed here.</b></div>

</body>

</html>

showUser() 函数会执行以下步骤：

  • 检查是否有用户被选择
  • 创建 XMLHttpRequest 对象
  • 创建在服务器响应就绪时执行的函数
  • 向服务器上的文件发送请求
  • 请注意添加到 URL 末端的参数（q）（包含下拉列表的内容）

PHP 文件

上面这段通过 JavaScript 调用的服务器页面是名为 "getuser.php" 的 PHP 文件。

"getuser.php" 中的源代码会运行一次针对 MySQL 数据库的查询，然后在 HTML 表格中返回结果：

<?php

$q=$_GET["q"];

$con = mysqli_connect('localhost','peter','abc123','my_db');

if (!$con)

{

	die('Could not connect: ' . mysqli_error($con));

}

mysqli_select_db($con,"ajax_demo");

$sql="SELECT * FROM user WHERE id = '".$q."'";

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

echo "<table border='1'>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

<th>Hometown</th>

<th>Job</th>

</tr>";

while($row = mysqli_fetch_array($result))

{

	echo "<tr>";

	echo "<td>" . $row['FirstName'] . "</td>";

	echo "<td>" . $row['LastName'] . "</td>";

	echo "<td>" . $row['Age'] . "</td>";

	echo "<td>" . $row['Hometown'] . "</td>";

	echo "<td>" . $row['Job'] . "</td>";

	echo "</tr>";

}

echo "</table>";

mysqli_close($con);

?>

解释：当查询从 JavaScript 发送到 PHP 文件时，将发生：

  1. PHP 打开一个到 MySQL 数据库的连接
  2. 找到选中的用户
  3. 创建 HTML 表格，填充数据，并发送回 "txtHint" 占位符

AJAX 与 MySQL的更多相关文章

  1. PHP - AJAX 与 MySQL

    PHP - AJAX 与 MySQL AJAX 可用来与数据库进行交互式通信. AJAX 数据库实例 下面的实例将演示网页如何通过 AJAX 从数据库读取信息: 本教程使用到的 Websites 表 ...

  2. PHP、jQuery、AJAX和MySQL 数据库实例

    index.html页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  3. 【京东个人中心】——Nodejs/Ajax/HTML5/Mysql爬坑之功能与数据分析

    一.引言 在学习了Nodejs和HTML5之后,发现了Nodejs的使用很方便,和php是完全不同的另一种后台语言.我也明白了,在一个项目里,是不可能同时存在Apach服务器(php)和Web服务器( ...

  4. .net Dapper 实践系列(1) ---项目搭建(Layui+Ajax+Dapper+MySQL)

    目录 写在前面 一.前期准备 1.在MySQL创建数据库 2.创建项目 3.安装程序包 4.添加插件 5.添加DbOption文件夹 6.添加实体类 写在前面 学习并实践使用Dapper 这个小型的O ...

  5. Ajax+PHP+MySQL 登陆示例

    PHP是一门很好的语言,可以很方便的开发web应用程序,下面介绍一下PHP如何通过AJAX方式实现登录功能: 1 login.php 登录界面中,javascript脚本用ajax方式异步请求dolo ...

  6. jquery ajax php+mysql 无刷新分页 详细实例

    最近在接触jquery和ajax,当前项目也会用到分页,为了用户体验更好一些,就准备用无刷新分页,这个demo很适合新手学习查看,写的比较清晰,话不多说,直接上代码吧. 首先是html页面,index ...

  7. jQuery+Ajax+PHP+Mysql实现分页显示数据

    css <style type="text/css"> #loading{ position: absolute; top: 200px; left:400px; } ...

  8. 【京东个人中心】——Nodejs/Ajax/HTML5/Mysql爬坑之注册与登录监听

    一.引言 在数据库和静态页面都创建好之后,下面就该接着完成后台Node.js监听注册和登录的部分了.这个部分主要使用的技术是:Node.js的Express框架和ajax异步请求.登录和注册的代码实现 ...

  9. PHP 实例 AJAX 与 MySQL

    AJAX 数据库实例 下面的实例将演示网页如何通过 AJAX 从数据库读取信息: 实例   Person info will be listed here... 实例解释 - MySQL 数据库 在上 ...

随机推荐

  1. 开源一个windows下的定时任务框架，简单粗暴好用。

    这里是你想要的功能: 支持插件,将你要执行的任务编译成程序集放到框架的根目录下,再进行简单的配置就行了. 支持Corn表达式.想让任务在什么时候执行就在什么时候执行. 支持安装成windows ser ...

  2. windows 2003自动登录的具体步骤

    在win2003系统中,使用最多的可能就是远程操作了,关于远程操作的那些事很多用户还是有些迷茫的.如果win2003系统远程重启后,要重新登录系统十分的麻烦,如何才能实现重启后的自动登录呢?让高手告诉 ...

  3. 【WPF系列】-TextBox常用知识点

    DataBinding中更新数据源的时机   TextBox .Text 属性的默认 UpdateSourceTrigger 值为 LostFocus.这意味着如果应用程序的 TextBox 包含数据 ...

  4. flush和reflush

    /** * jpa 中的reflush 同 hibernate 中 Session 的 refresh 方法. * * reflush 会强制发送sql查询(select)语句,使缓存中的数据和数据库 ...

  5. 第2章 Linux系统安装（2）_Linux系统分区及文件系统

    2. 系统分区 2.1 分区类型 (1)主分区:最多只能有4个 (2)扩展分区 ①最多只能有1个,主分区加扩展分区最多有4个. ②不能写入数据,只能包含逻辑分区 (3)逻辑分区 2.2 格式化(高级格 ...

  6. mysql: Illegal mix of collations (utf8_unicode_ci,IMPLICIT) and (utf8_general_ci,IMPLICIT) for operation '= 的解决

    昨天把mysql里所有table的varchar字段的字符集,批量换成了utf8mb4/utf8mb4_unicode_ci ,以便能保存一些emoji火星文 , 结果有一个sql语句执行时,报错如下 ...

  7. async/await Task Timeout

    async/await Task Timeout 在日常的电脑使用过程中,估计最难以忍受的就是软件界面"卡住""无响应",在我有限的开发生涯中一直都是在挑战 它 ...

  8. NPOI操作EXCEL（一）——npoi基础

    去年项目有一个子模块需要解析上百张不一样的excel表格入库,当时用的NPOI,做了很久...也尝试想把代码分享到oschina,结果没坚持两篇就放弃了. 赶巧的是,昨天运营那边提出要录入一些基础数据 ...

  9. Linux 命令积累

    1, su root 切换到root用户 su user 切换到普通用户 2, mkdir / touch 创建文件夹 /文件 3, vi 打开编辑文件 按insert进入编辑模式 编辑完成后 按es ...

  10. 【BZOJ 1087】【SCOI 2005】互不侵犯King

    http://www.lydsy.com/JudgeOnline/problem.php?id=1087 很简单的状压,需要预处理,我两个状态可不可以挨着的预处理出错WA了好几次. 这个位运算预处理好 ...