HTML 表单

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>AJAX 数据库实例</title>

     <script src="selectuser.js"></script>

 </head>

 <body>

     <form>

 Select a User:

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

 <option value="1">John</option>

 <option value="2">Linda</option>

 </select>

 </form>

 <p>

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

 </p>

 </body>

 </html>

例子解释 - HTML 表单
正如您看到的，它仅仅是一个简单的 HTML 表单，其中带有名为 "users" 的下拉列表，这个列表包含了
姓名，以及与数据库的 "id" 对应的选项值。
表单下面的段落包含了名为 "txtHint" 的 div。这个 div 用作从 web 服务器检索到的信息的占位符。
当用户选择数据时，执行名为 "showUser()" 的函数。该函数的执行由 "onchange" 事件触发。
换句话说：每当用户改变下拉列表中的值，就会调用 showUser() 函数。

JavaScript(selectuser.js)

 var xmlHttp;

 function showUser(str)

 {

 xmlHttp=GetXmlHttpObject();

 if (xmlHttp==null)

 {

 alert ("Browser does not support HTTP Request");

 return

 }

 var url="getuser.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.status==200 && xmlHttp.readyState==4)

 {

 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;

 }

例子解释：

showUser() 函数
假如下拉列表中的项目被选择，函数执行：

  1. 调用 GetXmlHttpObject 函数来创建 XMLHTTP 对象
  2. 定义发送到服务器的 URL（文件名）
  3. 向 URL 添加带有下拉列表内容的参数 (q)
  4. 添加一个随机数，以防服务器使用缓存的文件
  5. 当触发事件时调用 stateChanged
  6. 通过给定的 URL 打开 XMLHTTP 对象
  7. 向服务器发送 HTTP 请求

stateChanged() 函数
每当 XMLHTTP 对象的状态发生改变，则执行该函数。
在xmlhttp.readyState==4 && xmlhttp.status==200时，用响应文本填充 txtHint 占位符 txtHint 的内容。

xmlhttp.readyState有5种状态：

  1. 请求未初始化（还没有调用 open()）。
  2. 请求已经建立，但是还没有发送（还没有调用 send()）。
  3. 请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
  4. 请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
  5. 响应已完成；您可以获取并使用服务器的响应了。

参考：http://www.cnblogs.com/fsjohnhuang/articles/2345653.html

xmlhttp.status的状态码：

  1. 100-199 用于指定客户端应相应的某些动作。
  2. 200-299 用于表示请求成功。
  3. 300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
  4. 400-499 用于指出客户端的错误。
  5. 500-599 用于支持服务器错误。

参考：http://www.cnblogs.com/lxinxuan/archive/2009/10/22/1588053.html

GetXmlHttpObject() 函数
AJAX 应用程序只能运行在完整支持 XML 的 web 浏览器中。
上面的代码调用了名为 GetXmlHttpObject() 的函数。
该函数的作用是解决为不同浏览器创建不同 XMLHTTP 对象的问题。

PHP 页面（getuser.php）

该页面用 PHP 编写，并使用 MySQL 数据库。
其中的代码执行针对数据库的 SQL 查询，并以 HTML 表格返回结果：

 <?php

 $q=$_GET["q"];

 $con = mysql_connect('www.mytest.com', 'root', 'root');

 if (!$con)

 {

 die('Could not connect: ' . mysql_error());

 }

 mysql_select_db("test", $con);

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

 $result = mysql_query($sql);

 echo "<table border='1'>

 <tr>

 <th>id</th>

 <th>FirstName</th>

 <th>LastName</th>

 <th>email</th>

 <th>reg_date</th>

 </tr>";

 while($row = mysql_fetch_array($result))

 {

 echo "<tr>";

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

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

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

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

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

 echo "</tr>";

 }

 echo "</table>";

 mysql_close($con);

 ?>

例子解释：
当查询从 JavaScript 被发送到这个 PHP 页面，会发生：

  1. PHP 打开到达 MySQL 服务器的连接
  2. 找到拥有指定姓名的 "user"
  3. 创建表格，插入数据，然后将其发送到 "txtHint" 占位符

PHP 和 AJAX MySQL 数据库实例的更多相关文章

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

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

  2. Python MySQLdb模块连接操作mysql数据库实例_python

    mysql是一个优秀的开源数据库,它现在的应用非常的广泛,因此很有必要简单的介绍一下用python操作mysql数据库的方法.python操作数据库需要安装一个第三方的模块,在http://mysql ...

  3. 在一台机子上，安装，运行两mysql数据库实例

    为了方便测试,想要用到两个mysql数据库实例.以windows系统为例 当然安装第一个mysql数据库,很简单没什么说的.但是再要安装,运行mysql安装程序时,会提示,修复,卸载,重新安装. 这时 ...

  4. 批量获取mysql数据库实例指定参数的值

    需求:需要对比所有mysql数据库实例上面的指定参数配置情况,同时需要需要能看到如ip,端口,master or slave,毕竟主和从参数不一样还是有可能的. 说明:必须要有个数据库存储所有是数据库 ...

  5. shell脚本连接、读写、操作mysql数据库实例

    本文介绍了如何在shell中读写mysql数据库.主要介绍了如何在shell 中连接mysql数据库,如何在shell中创建数据库,创建表,插入csv文件,读取mysql数据库,导出mysql数据库为 ...

  6. python3连接MySQL数据库实例

    #python3连接MySQL实例 import pymysql """导入连接MySQL需要的包,没有安装pymysql需要先安装 使用命令行切换到python的安装路 ...

  7. 一分钟在云端快速创建MySQL数据库实例

    本教程将帮助您了解如何使用Azure管理门户迅速创建,连接,配置MySQL 数据库 on Azure.完成本教程后,您将在Azure上拥有一个示例MySQL数据库服务器,并了解如何使用管理门户执行基本 ...

  8. java连接mysql数据库实例

    做游戏客户端多一年多了,在大学学的java的SSH,基本上都忘完了,今天看了一下发现基本的连接数据库的都忘了...太可怕了这遗忘的速度. 所以写了个连接的例子吧..安装好mysql数据库之后新建了两张 ...

  9. python 之操作mysql 数据库实例

    对于python操作mysql 数据库,具体的步骤应为: 1. 连接上mysql host 端口号 数据库 账号 密码2. 建立游标3. 执行sql(注意,如果是update,insert,delet ...

随机推荐

  1. 安装php扩展模块参数memcache和memcached在php中的应用

    一, memcache和memcached的区别与关系统php要想去访问memcached就得需要memcache扩展,这个道理和php连接mysql一样. 你不安装memcache扩展就没法识别me ...

  2. LINQ获取两个List的交集

    1.调用: UserList = UserList.ToList().Intersect(userIDList, new MyUserComparer()).AsQueryable(); 2.须要重写 ...

  3. JMeter接口测试中文乱码问题总结

    在测试过程中遇到了请求json串中文乱码,所以查看了这篇文章,将字符集修改后,乱码问题已经处理. 转载http://blog.csdn.net/qing_java/article/details/69 ...

  4. 开发ionic准备之安卓模拟器设置(2)

    发现这个安卓模拟器设置屏幕还不能太大,太大显示不全,然后整个模拟器不能拖动,所以尽量不要设置太大的分辨率 ,如下即可 如果选安卓4.4然后勾选了其他下面的ok还不能点击的话,这下要去sdk manag ...

  5. HDOJ 1534 Schedule Problem 差分约束

    差分约数: 求满足不等式条件的尽量小的值---->求最长路---->a-b>=c----> b->a (c) Schedule Problem Time Limit: 2 ...

  6. PLSQL Developer设置及快捷键设置

    1.登录后默认自动选中My Objects 默认情况下,PLSQL Developer登录后,Brower里会选择All objects,如果你登录的用户是dba,要展开tables目录,正常情况都需 ...

  7. js从$scope外部调用$scope内部函数，跨js调用非全局函数

    scope内部函数定义 //定位 $scope.LocateByPoint = function (x,y) { if(!x || !y) { window.alert("GPS坐标不存在, ...

  8. A股市场底部顶部历史数据

    1. A股市场平均市盈率 大顶沪市平均市盈率:66-70倍. A股市场2次大底沪市平均市盈率:12倍-15倍. 大底时的例子. 2005年6月6日上证指数1000点时的14倍市盈率.2008年10月2 ...

  9. Hadoop datanode无法启动

    原因是多次 hadoop namenode -format  导致 datanode 的version 里的Cluster-Id 不一致 这个Cluster-Id的位置在:  自己设置的数据临时文件/ ...

  10. maven设置本地仓库地址和设置国内镜像

    <?xml version="1.0" encoding="UTF-8"?> <!-- 英文注释已经被删除了,直接修改本地仓库地址用就行了. ...