为了清楚的说明使用 Ajax 从数据库中存取信息有多么容易，我们要构建一个 MySQL 查询，然后把结果显示在ajax.html 上。但是在我们开始之前，让我们先做一些基础工作。使用下面的命令创建一个数据表。

注意： 我们假设你有足够的权限执行以下 MySQL 操作。

CREATE TABLE 'Ajax_example' (

   'name' varchar(50) NOT NULL,

   'age' int(11) NOT NULL,

   'sex' varchar(1) NOT NULL,

   'wpm' int(11) NOT NULL,

   PRIMARY KEY  ('name')

)

然后使用下面的 SQL 语句把下列数据存到这个表中：

INSERT INTO 'Ajax_example' VALUES ('Jerry', 120, 'm', 20);

INSERT INTO 'Ajax_example' VALUES ('Regis', 75, 'm', 44);

INSERT INTO 'Ajax_example' VALUES ('Frank', 45, 'm', 87);

INSERT INTO 'Ajax_example' VALUES ('Jill', 22, 'f', 72);

INSERT INTO 'Ajax_example' VALUES ('Tracy', 27, 'f', 0);

INSERT INTO 'Ajax_example' VALUES ('Julie', 35, 'f', 90);

客户端 HTML 文件

现在让我们来建立客户端的 HTML 文件，也就是 ajax.html，它包含如下代码：

<html>

<body>

<script language="javascript" type="text/javascript">

<!--

// 浏览器支持代码

function AjaxFunction(){

    var AjaxRequest;  // 缓存 XMLHttpRequest 对象

    try{

        // Opera 8.0+, Firefox, Safari

        AjaxRequest = new XMLHttpRequest();

    }catch (e){

        // Internet Explorer Browsers

        try{

            AjaxRequest = new ActiveXObject("Msxml2.XMLHTTP");

        }catch (e) {

            try{

                AjaxRequest = new ActiveXObject("Microsoft.XMLHTTP");

            }catch (e){

                // 错误处理

                alert("Your browser broke!");

                return false;

            }

        }

    }

    // 创建一个接受服务器发送的数据的函数，它还会更新同一页面的 div 部分。

    AjaxRequest.onreadystatechange = function(){

        if(AjaxRequest.readyState == 4){

            var AjaxDisplay = document.getElementById('AjaxDiv');

            AjaxDisplay.innerHTML = AjaxRequest.responseText;

        }

    }

    // 然后获取用户输入值并传递给服务器脚本

    var age = document.getElementById('age').value;

    var wpm = document.getElementById('wpm').value;

    var sex = document.getElementById('sex').value;

    var queryString = "?age=" + age ;

    queryString +=  "&wpm=" + wpm + "&sex=" + sex;

    AjaxRequest.open("GET", "Ajax-example.php" + queryString, true);

    AjaxRequest.send(null);

}

//-->

</script>

<form name='myForm'>

    Max Age: <input type='text' id='age' /> <br />

    Max WPM: <input type='text' id='wpm' /> <br />

    Sex:

    <select id='sex'>

      <option value="m">m</option>

      <option value="f">f</option>

    </select>

    <input type='button' onclick='AjaxFunction()' value='Query MySQL'/>

</form>

<div id='AjaxDiv'>结果会显示在这里。</div>

</body>

</html>

注意： 在查询中传递变量的方法取决于 HTML 标准以及我们使用哪种形式。

URL?variable1=value1;&variable2=value2;

上面的代码会显示一个如下所示的屏幕显示：

注意： 这还是一个模拟的屏幕显示，它还不能工作。

获取到条目之后结果会显示在这个部分。

注意： 这里是一个模拟的屏幕显示。

服务端 PHP 文件

客户端脚本已经准备就绪。现在，我们必须编写服务端脚本，它会从数据库中提取 age，wpm 和 sex，然后把它们发送回客户端。请把下面的代码放到 "ajax-example.php" 中。

 <?php

 $dbhost = "localhost";

 $dbuser = "dbusername";

 $dbpass = "dbpassword";

 $dbname = "dbname";

 // 连接 MySQL 服务器

 mysql_connect($dbhost, $dbuser, $dbpass);

 // 选择数据库

 mysql_select_db($dbname) or die(mysql_error());

 // 从查询字符串中检索数据（字段）

 $age = $_GET['age'];

 $sex = $_GET['sex'];

 $wpm = $_GET['wpm'];

 // 转移用户输入便于防止 SQL 注入

 $age = mysql_real_escape_string($age);

 $sex = mysql_real_escape_string($sex);

 $wpm = mysql_real_escape_string($wpm);

 // 构建查询

 $query = "SELECT * FROM Ajax_example WHERE sex = '$sex'";

 if(is_numeric($age))

     $query .= " AND age <= $age";

 if(is_numeric($wpm))

     $query .= " AND wpm <= $wpm";

 // 执行查询

 $qry_result = mysql_query($query) or die(mysql_error());

 // 构建结果字符串

 $display_string = "<table>";

 $display_string .= "<tr>";

 $display_string .= "<th>Name</th>";

 $display_string .= "<th>Age</th>";

 $display_string .= "<th>Sex</th>";

 $display_string .= "<th>WPM</th>";

 $display_string .= "</tr>";

 // 针对返回的每个 person 条目在表格中插入一个新行

 while($row = mysql_fetch_array($qry_result)){

     $display_string .= "<tr>";

     $display_string .= "<td>$row[name]</td>";

     $display_string .= "<td>$row[age]</td>";

     $display_string .= "<td>$row[sex]</td>";

     $display_string .= "<td>$row[wpm]</td>";

     $display_string .= "</tr>";

 }

 echo "Query: " . $query . "<br />";

 $display_string .= "</table>";

 echo $display_string;

 ?>

现在可以尝试在 Max Age 或者其他输入框中输入一个有效的值（比如 120），然后点击 Query MySQL 按钮。

获取到条目之后结果将会显示在这个部分

如果你成功完成这一课，那么你就知道如何串联使用 MySQL，PHP，HTML 和 JavaScript 编写 Ajax 应用程序了。

Ajax 数据库操作的更多相关文章

  1. ajax调用WebService实现数据库操作

    首先说下测试环境和思路: 前端收集数据转换成json格式传输到后端,处理并存入数据库 1.数据库操作: [WebMethod] public string InsertPoint(string dat ...

  2. ASP.NET实现二维码 ASP.Net上传文件 SQL基础语法 C# 动态创建数据库三（MySQL） Net Core 实现谷歌翻译ApI 免费版 C#发布和调试WebService ajax调用WebService实现数据库操作 C# 实体类转json数据过滤掉字段为null的字段

    ASP.NET实现二维码 using System;using System.Collections.Generic;using System.Drawing;using System.Linq;us ...

  3. python 学习笔记十六 django深入学习一 路由系统，模板，admin，数据库操作

    django 请求流程图 django 路由系统 在django中我们可以通过定义urls,让不同的url路由到不同的处理函数 from . import views urlpatterns = [ ...

  4. 05：ModelForm 数据验证 & 生成html & 数据库操作

    目录:Django其他篇 01:Django基础篇 02:Django进阶篇 03:Django数据库操作--->Model 04: Form 验证用户数据 & 生成html 05:Mo ...

  5. django上课笔记4-复习数据库操作-复习模板-Seccion-详细cookie和session的区别

    一.复习数据库操作 字段类型 字符串 EmailField(CharField): IPAddressField(Field) URLField(CharField) SlugField(CharFi ...

  6. 如何在高并发环境下设计出无锁的数据库操作（Java版本）

    一个在线2k的游戏,每秒钟并发都吓死人.传统的hibernate直接插库基本上是不可行的.我就一步步推导出一个无锁的数据库操作. 1. 并发中如何无锁. 一个很简单的思路,把并发转化成为单线程.Jav ...

  7. 【知识必备】ezSQL，最好用的数据库操作类，让php操作sql更简单~

    最近用php做了点小东东,用上了ezSQL,感觉真的很ez,所以拿来跟大家分享一下~ ezSQL是一个非常好用的PHP数据库操作类.著名的开源博客WordPress的数据库操作就使用了ezSQL的My ...

  8. MySQL 系列（二） 你不知道的数据库操作

    第一篇:MySQL 系列(一) 生产标准线上环境安装配置案例及棘手问题解决 第二篇:MySQL 系列(二) 你不知道的数据库操作 本章内容: 查看\创建\使用\删除 数据库 用户管理及授权实战 局域网 ...

  9. ABP创建数据库操作步骤

    1 ABP创建数据库操作步骤 1.1 SimpleTaskSystem.Web项目中的Web.config文件修改数据库配置. <add name="Default" pro ...

随机推荐

  1. 2.6---找有环链表的开头结点（CC150）

    public ListNode detectCycle(ListNode head) { ListNode fast = head; ListNode slow = head; int flag = ...

  2. 1.3---字符串重新排列后是否能够变成另一个字符串（CC150）

    import java.util.*; public class Same { public boolean checkSam(String str1, String str2) { // write ...

  3. Python操作excel，及图表展示

    学习:http://www.cnblogs.com/Lands-ljk/p/5444619.html

  4. [20160701]DevideByZeroWithoutNoException——from 《Java How To Program (Early Objects), 10th》

    //一段优美的例子 import java.util.Scanner; import java.util.InputMismatchException; public class DevideByZe ...

  5. pl/sql中having的用法

    HAVING的作用: 因为where关键字无法与聚集函数一起使用,HAVING可以和聚集函数一起使用 HAVING的语法: SELECT column_name, aggregate_function ...

  6. Unity3d《Shader篇》法线贴图

    效果图 贴图 法线贴图 //代码 Shader "Custom/NormalMap" { Properties { _MainTex ("Texture", 2 ...

  7. CentOS 6.6 (Desktop)部署Apache、MySQL以及Eclipse Luna等记录

    内容较多,持续更新(2015-03-12 16:37:05) *如果没有特别说明,以下操作都是在root账号下完成,图形界面为GNOME. 一.防火墙 先从防火墙入手,为了后续的环境搭建,需要打开80 ...

  8. K3安装记录

    安装的某些客户端没有客户端管理工具,测试问题所在 K3安装目录选择到D盘就可以,它自动生成kingdee\k3路径

  9. log4net使用

    平时项目里一直都有在使用log4net作为日志记录模块,当时一直都没有去理解log4net的配置文件信息.今天抽出了一点时间来看了看配置文件信息. log4net配置文件信息: <log4net ...

  10. C#关于new的用法

    1.运算符就是在实例化一个类的时候(运算符的用法) A a=new A(); 2.new 约束指定泛型类声明中的任何类型参数都必须有公共无参数构造函数.当泛型类创建类型的新实例时,将此约束应用于类型参 ...