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. [置顶] kubernetes资源类型--secret和Service Account

    secret 概念 secret对象类型主要目的是保存和处理敏感信息/私密数据,比如密码,OAuth tokens,ssh keys等信息.将这些信息放在secret对象中比 直接放在pod或dock ...

  2. ylbtech_dbs_article_五大主流数据库模型

    ylbtech_dbs_article 摘要:什么是数据模型? 访问数据库中的数据取决于数据库实现的数据模型.数据模型会影响客户端通过API对数据的操作.不同的数据模型可能会提供或多或少的功能.一般而 ...

  3. 针对ecshop错误404页面的优化

    在ecshop系统当中,比如你随意将商品详细页面的地址中的ID修改为一个不存在的商品ID,ecshop会自动跳转到首页.ecshop在这方面做得非常的差,甚至导致了很多的站不被搜索引擎收录.最模板提供 ...

  4. Linux Java开发环境

    一.旧版本JDK卸载 1.卸载系统自带JDK版本 #rpm -qa|grep gcj 查看到如下信息,如图所示:   进行卸载默认安装JDK: #rpm -e --nodeps java-1.4.2- ...

  5. Android学习（十） SQLite 基于SQL语句的操作方式

    main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns ...

  6. SQLite使用事务

    关键代码 SQLiteDatabase db = myDataHelper.getWritableDatabase(); // 开启事务 db.beginTransaction(); try{ db. ...

  7. 标准库Allocator的简易实现（二）

    自己实现Allocator并不难,其实只需要改变allocate和deallocate,来实现自己的内存分配策略.   下面是一个std::allocator的模拟实现 #ifndef ALLOCAT ...

  8. 【BIEE】09_BIEE控制台乱码问题解决

    BIEE安装完成后,点击[启动BI服务] 接着从弹出窗口可以发现,全部汉字都是乱码 出现这种情况,想看一下BIEE启动情况是很费劲的,接着我们处理一下这个问题 1.从路径D:\obiee\user_p ...

  9. 中小企业 DevOps 从 0 到 1

    原文:http://www.sohu.com/a/145065274_262549 今天主要有四个课题: 先聊一聊 DevOps: 然后跟大家聊一聊运维知识的体系和职业发展: 再是中小企业基于开源的 ...

  10. IIS管理器如何添加网站

    IIS服务器一些步骤 安装好iis后 右击网站按钮点击添加网站 网站名称填写无所谓,物理路径(注意是大路径,一个项目所有的文件在那个文件夹下), Ip地址自己定义最好是hosts文件已经绑定了域名的, ...