为了清楚的说明使用 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. Sublime text2 插件推荐

    HTML-CSS-JS Prettify:  前端插件,使用 ctrl+shift+h 格式化代码

  2. struts2 servlet api 访问方式

    Action中访问ServletAPI. 主要就是接收表单参数及向域对象中存取值. 关于SevletAPI的方法在Action中有三种方式: 1.完全解耦合的形式: * 使用一个类:ActionCon ...

  3. Appium+Robotframework实现Android应用的自动化测试-1：Appium在Windows中的安装

    让我们开始在Windows中开始安装Appium吧,Appium在OS X中的具体安装后面的文章会介绍. 另外,官网上说先要装Node.js,还要装Apache Ant和Apache Maven,Gi ...

  4. effective c++ resources

    http://www.cnblogs.com/littlethank/archive/2011/12/15/2288787.html http://www.cnblogs.com/liao-xiao- ...

  5. ios 在ios9中 NSNotificationCenter addObserver 不会影响对象释放

    如题,ios9上,  [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(test) name:@&qu ...

  6. iOS 关于iphone6 和 iphone6 plus 的适配

    http://www.ui.cn/detail/26980.html 根据上面说的,iphone6 plus的屏幕的编程时的宽度应该是414,我理解的也是这样,但是我用iphone6 plus 模拟器 ...

  7. InnoDB O_DIRECT选项漫谈（一）【转】

    本文来自:http://insidemysql.blog.163.com/blog/static/2028340422013671186977/   最近和文件系统内核开发人员做技术交流,对O_DIR ...

  8. codeforces 518B. Tanya and Postcard 解题报告

    题目链接:http://codeforces.com/problemset/problem/518/B 题目意思:给出字符串 s 和 t,如果 t 中有跟 s 完全相同的字母,数量等于或者多过 s,就 ...

  9. 混合高斯模型：opencv中MOG2的代码结构梳理

    /* 头文件:OurGaussmix2.h */ #include "opencv2/core/core.hpp" #include <list> #include&q ...

  10. NEFU 1112 粉刷栅栏算法

    题目链接 中文题 简单搜索题 例数据 输入 6 1 1 1 1 9 9 输出 3 注意是每一个递归搜索都返回一个min 而不是只有总的返回min #include <cstdio> #in ...