为了清楚的说明使用 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. HackerRank savita-and-friends

    Description 在一条边上求一个点,使得这个点到所有点的最长的最短距离 最短. \(n \leqslant 10^5\) Sol Dijkstra+扫描线+单调队列. 这个好像叫什么最小直径生 ...

  2. 再谈Weiphp公众平台开发——1、成语接龙插件

    易错点,注意插件的命名 1.创建插件.在weiphp管理后台创建成语接龙插件,勾选安装后立即启用,不需要配置项和管理列表.点“确定”完成插件的创建. 2.安装插件. 3.检测插件是否成功安装.返回到w ...

  3. hibernate query.list() 返回的数据类型

    在hibernate中,用hql语句查询实体类,采用list方法的返回结果为一个List,该List中封装的对象分为以下三种情况: 1.查询全部字段的情况下,如"from 实体类" ...

  4. php类与对象

    1.类与对象 对象:实际存在该类事物中每个实物的个体.$a =new User(); 实例化后的$a 引用:php的别名,两个不同的变量名字指向相同的内容 封装: 把对象的属性和方法组织在一个类(逻辑 ...

  5. linux 终端全局代理设置

    http://www.webupd8.org/2010/10/how-to-set-proxy-for-terminal-quick.html 即 export http_proxy='http:// ...

  6. phpcms模块开发简易教程

    简介: 在phpcms中,各个功能是以模块为单位定义的(对应modules目录),如果需要新增功能最好的办法就是开发一个模块,然后复制到phpcms目录下,然后进入后台安装即可. 官方说明: phpc ...

  7. JavaScript——exec和match

    题目17:Read the following javascript code: var someText="web2.0 .net2.0";var pattern=/(\w+)( ...

  8. redis与memcache区别总结

    2015年9月2日 14:04:19 总会被问到两者的区别, 在这里总结下: redis 有内置的多种数据结构, list(可用于实现小型队列), hash, set, zset...; memcac ...

  9. 【leetcode】Edit Distance (hard)

    Given two words word1 and word2, find the minimum number of steps required to convert word1 to word2 ...

  10. 【剑指offer】题目36 数组中的逆序对

    数组中任取两个数字,如果前面的数字大于后面的数字称为一个逆序对 如:1,2,1,2,1 有3个逆序对 思路:知道O(N2)肯定是错的.开始想hash,试图找到O(n)的算法,想了很久,找不到.后来想到 ...