为了清楚的说明使用 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. Bootstrap IIFE

    在Bootstrap源码(具体请看<Bootstrap源码解析>)和其他jQuery插件经常看到如下的写法: +function ($) { }(window.jQuery); 这种写法称 ...

  2. mac 下搭建php 编程环境全过程

    1,打开终端, 设置root密码sudo passwd root输入密码 2, 安装 apachemac 自带apache 启动apachectl start重新启动apachectl restart ...

  3. admin 后台 bs模板

    http://bootsnipp.com/ https://almsaeedstudio.com/preview

  4. python self introspection

    http://www.ibm.com/developerworks/cn/linux/l-pyint/index1.html

  5. JAVA分布式事务原理及应用(转)

      JTA(Java Transaction API)允许应用程序执行分布式事务处理--在两个或多个网络计算机资源上访问并且更新数据. JDBC驱动程序的JTA支持极大地增强了数据访问能力. 本文的目 ...

  6. POJ 3903

    http://poj.org/problem?id=3903 这个题目是一个求最长递增子序列,这个只是求长度而已,所以可以用LIS 所谓的LIS也就是用二分优化来减少时间而已,而且其只能求出最长的序列 ...

  7. selenium使用actions.moveToElement处理菜单

    //should set firefox path //FirefoxBinary binary=new FirefoxBinary(new File("C:\\Program Files ...

  8. 8.nodejs权威指南--MongoDB

    1. MongoDB var mongo = require('mongodb'); var host = '127.0.0.1'; var port = mongo.Connecton.DEFAUL ...

  9. 【leetcode】Compare Version Numbers（middle）

    Compare two version numbers version1 and version2.If version1 > version2 return 1, if version1 &l ...

  10. 【linux】虚拟机安装centos后ping ip地址出现错误：Network is unreachable

    来源:https://my.oschina.net/stonezing/blog/515480 方案一: 进入/etc/sysconfig/network-scripts/ 查看这下面的文件 每个人的 ...