为了清楚的说明使用 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. BZOJ 3827: [Poi2014]Around the world

    Sol 并查集. 一个点所能到达的最远是单调不降的.然后将链延长到两倍,预处理出每个点到达的最远点,然后倒着计算深度. 再然后一直跳,跳到>=x+n的点,因为跳到的点都能到最终的点,并且不影响后 ...

  2. django的views里面的request对象详解大全

    简介 HTTP 应用的信息是通过 请求报文 和 响应报文 传递的,关于更多的相关知识,可以阅读<HTTP权威指南>获得. 其中 请求报文 由客户端发送,其中包含和许多的信息,而 djang ...

  3. 中文的加密传输（python版）

    信息传输过程中,可能会被各种监听. 这里介绍一种简单的加密算法(可逆). 正向加密: 字符串 -> 字节(char->int转换) -> 异或每个字节某个KEY  ->字节(i ...

  4. 循环(loop), 递归(recursion), 遍历(traversal), 迭代(iterate)的区别

    表示“重复”这个含义的词有很多, 比如循环(loop), 递归(recursion), 遍历(traversal), 迭代(iterate). 循环算是最基础的概念, 凡是重复执行一段代码, 都可以称 ...

  5. php中set_time_limit()函数运用

    当你的页面有大量数据时,建议使用set_time_limit()来控制运行时间,默认是30s,所以需要你将执行时间加长点. 如 set_time_limit(800)  ,其中将秒数设为0 ,表示持续 ...

  6. ios 在storyboard 和 xib中，显示自定义view的预览效果

    发现FSCalendar这个控件能在xib中显示预览效果,是怎么实现的呢?其中涉及的知识又有哪些? 主要就是IBInspectable 和 IB_DESIGNABLE 先看 IBInspectable ...

  7. SQL Update 巧用

    JOIN 样本 ********************************** Update 结存 set 结存.现有库存=c.入仓数-b.出仓数量 from 结存 a )) 入仓数 from ...

  8. 安装VisualSvn Server时遇到的问题

    安装标准版VisualSvnserver,端口443,启用https//,安装过程中报服务启动失败,后用命令行 msiexec /i VisualSVN-Server-2.7.3.msi NO_STA ...

  9. Python~list,tuple^_^dict,set

    tuple~(小括号) list~[中括号] 和list比较,dict有以下几个特点: dict~{‘key’:value,} set~set([1,2,3]) tuple一旦初始化就不能修改~指向不 ...

  10. ALV 输入数据时数字缩小一千倍的问题解决

    这个字段后面有三位小数  我输入 1 一回车 就变成了0.001 了 解决方法 DATA: wa_fieldcatalog    TYPE lvc_s_fcat,    "显示数据列内表工作 ...