PHP - AJAX 与 MySQL

AJAX 可用来与数据库进行交互式通信。

AJAX 数据库实例

下面的实例将演示网页如何通过 AJAX 从数据库读取信息：

本教程使用到的 Websites 表 SQL 文件：websites.sql。

实例

 
选择一个网站:
 
Google
 
淘宝
 
菜鸟教程
 
微博
 
Facebook

选择对应选项，用户信息会显示在这……

实例解释 - MySQL 数据库

在上面的实例中，我们使用的数据库表如下所示：

mysql> select * from websites;

+----+--------------+---------------------------+-------+---------+

| id | name         | url                       | alexa | country |

+----+--------------+---------------------------+-------+---------+

| 1  | Google       | https://www.google.cm/    | 1     | USA     |

| 2  | 淘宝       | https://www.taobao.com/   | 13    | CN      |

| 3  | 菜鸟教程 | http://www.runoob.com/    | 4689  | CN      |

| 4  | 微博       | http://weibo.com/         | 20    | CN      |

| 5  | Facebook     | https://www.facebook.com/ | 3     | USA     |

+----+--------------+---------------------------+-------+---------+

5 rows in set (0.01 sec)

实例解释 - HTML 页面

当用户在上面的下拉列表中选择某位用户时，会执行名为 "showSite()" 的函数。该函数由 "onchange" 事件触发：

test.html 文件代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<script>

function showSite(str)

{

    if (str=="")

    {

        document.getElementById("txtHint").innerHTML="";

        return;

    }

    if (window.XMLHttpRequest)

    {

        // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

        xmlhttp=new XMLHttpRequest();

    }

    else

    {

        // IE6, IE5 浏览器执行代码

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

    }

    xmlhttp.onreadystatechange=function()

    {

        if (xmlhttp.readyState==4 && xmlhttp.status==200)

        {

            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;

        }

    }

    xmlhttp.open("GET","getsite_mysql.php?q="+str,true);

    xmlhttp.send();

}

</script>

</head>

<body>

<form>

<select name="users" onchange="showSite(this.value)">

<option value="">选择一个网站:</option>

<option value="1">Google</option>

<option value="2">淘宝</option>

<option value="3">菜鸟教程</option>

<option value="4">微博</option>

<option value="5">Facebook</option>

</select>

</form>

<br>

<div id="txtHint"><b>网站信息显示在这里……</b></div>

</body>

</html>

showSite() 函数会执行以下步骤：

  • 检查是否有网站被选择
  • 创建 XMLHttpRequest 对象
  • 创建在服务器响应就绪时执行的函数
  • 向服务器上的文件发送请求
  • 请注意添加到 URL 末端的参数（q）（包含下拉列表的内容）

PHP 文件

上面这段通过 JavaScript 调用的服务器页面是名为 "getsite_mysql.php" 的 PHP 文件。

"getsite_mysql.php" 中的源代码会运行一次针对 MySQL 数据库的查询，然后在 HTML 表格中返回结果：

getsite_mysql.php 文件代码:

<?php

$q = isset($_GET["q"]) ? intval($_GET["q"]) : '';

if(empty($q)) {

    echo '请选择一个网站';

    exit;

}

$con = mysqli_connect('localhost','root','123456');

if (!$con)

{

    die('Could not connect: ' . mysqli_error($con));

}

// 选择数据库

mysqli_select_db($con,"test");

// 设置编码，防止中文乱码

mysqli_set_charset($con, "utf8");

$sql="SELECT * FROM Websites WHERE id = '".$q."'";

$result = mysqli_query($con,$sql);

echo "<table border='1'>

<tr>

<th>ID</th>

<th>网站名</th>

<th>网站 URL</th>

<th>Alexa 排名</th>

<th>国家</th>

</tr>";

while($row = mysqli_fetch_array($result))

{

    echo "<tr>";

    echo "<td>" . $row['id'] . "</td>";

    echo "<td>" . $row['name'] . "</td>";

    echo "<td>" . $row['url'] . "</td>";

    echo "<td>" . $row['alexa'] . "</td>";

    echo "<td>" . $row['country'] . "</td>";

    echo "</tr>";

}

echo "</table>";

mysqli_close($con);

?>

解释：当查询从 JavaScript 发送到 PHP 文件时，将发生：

  1. PHP 打开一个到 MySQL 数据库的连接
  2. 找到选中的用户
  3. 创建 HTML 表格，填充数据，并发送回 "txtHint" 占位符

PHP - AJAX 与 MySQL的更多相关文章

  1. AJAX 与 MySQL

    AJAX 与 MySQL AJAX 可用来与数据库进行交互式通信. AJAX 数据库实例 下面的实例将演示网页如何通过 AJAX 从数据库读取信息: 实例   Select a person:   P ...

  2. PHP、jQuery、AJAX和MySQL 数据库实例

    index.html页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  3. 【京东个人中心】——Nodejs/Ajax/HTML5/Mysql爬坑之功能与数据分析

    一.引言 在学习了Nodejs和HTML5之后,发现了Nodejs的使用很方便,和php是完全不同的另一种后台语言.我也明白了,在一个项目里,是不可能同时存在Apach服务器(php)和Web服务器( ...

  4. .net Dapper 实践系列(1) ---项目搭建(Layui+Ajax+Dapper+MySQL)

    目录 写在前面 一.前期准备 1.在MySQL创建数据库 2.创建项目 3.安装程序包 4.添加插件 5.添加DbOption文件夹 6.添加实体类 写在前面 学习并实践使用Dapper 这个小型的O ...

  5. Ajax+PHP+MySQL 登陆示例

    PHP是一门很好的语言,可以很方便的开发web应用程序,下面介绍一下PHP如何通过AJAX方式实现登录功能: 1 login.php 登录界面中,javascript脚本用ajax方式异步请求dolo ...

  6. jquery ajax php+mysql 无刷新分页 详细实例

    最近在接触jquery和ajax,当前项目也会用到分页,为了用户体验更好一些,就准备用无刷新分页,这个demo很适合新手学习查看,写的比较清晰,话不多说,直接上代码吧. 首先是html页面,index ...

  7. jQuery+Ajax+PHP+Mysql实现分页显示数据

    css <style type="text/css"> #loading{ position: absolute; top: 200px; left:400px; } ...

  8. 【京东个人中心】——Nodejs/Ajax/HTML5/Mysql爬坑之注册与登录监听

    一.引言 在数据库和静态页面都创建好之后,下面就该接着完成后台Node.js监听注册和登录的部分了.这个部分主要使用的技术是:Node.js的Express框架和ajax异步请求.登录和注册的代码实现 ...

  9. PHP 实例 AJAX 与 MySQL

    AJAX 数据库实例 下面的实例将演示网页如何通过 AJAX 从数据库读取信息: 实例   Person info will be listed here... 实例解释 - MySQL 数据库 在上 ...

随机推荐

  1. asp.net绝对与相对路径

    对于asp.net 路径的问题,闲心有很多人和我一样,只是知道一点,理解并不深刻.下面我就来整理一下相路径和绝对路径的知识. 绝对路径: 每个网页都有一个唯一的地址,它就是该网页的绝对路径.绝对路径提 ...

  2. QT学习笔记2：QT中常用函数

    一.QString转number QString number() QString number() QString number() QString number() QString number( ...

  3. [BZOJ4826][HNOI2017]影魔(主席树)

    4826: [Hnoi2017]影魔 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 669  Solved: 384[Submit][Status][ ...

  4. HDU 6136 Death Podracing（循环链表）

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=6136 [题目大意] 一堆人在操场上跑步,他们都有一定的速度和初始位置, 当两个人相遇的时候编号较小 ...

  5. 【主席树】BZOJ3524-[Poi2014]Couriers

    [题目大意] 给一个长度为n的序列a.1≤a[i]≤n. m组询问,每次询问一个区间[l,r],是否存在一个数在[l,r]中出现的次数大于(r-l+1)/2.如果存在,输出这个数,否则输出0. [思路 ...

  6. 【静态主席树】POJ2104-K-th Number

    求区间第k大.裸线段树. 莫队版本:☆ #include<iostream> #include<cstdio> #include<cstring> #include ...

  7. DiskFileUpload上传与Spring的CommonsMultipartResolver上传对比

    最近在做一个小小的上传功能竟被虐得体无完肤, 在使用tomcat内置的DiskFileUpload获取前台jsp传来的附件参数和其他表单参数, 竟然出现莫名其妙的乱码问题, 即使tomcat的serv ...

  8. [bzoj1024][SCOI2009]生日快乐 (枚举)

    Description windy的生日到了,为了庆祝生日,他的朋友们帮他买了一 个边长分别为 X 和 Y 的矩形蛋糕.现在包括windy,一共有 N 个人来分这块大蛋糕,要求每个人必须获得相同面积的 ...

  9. uoj117 欧拉回路

    题目描述: 有一天一位灵魂画师画了一张图,现在要你找出欧拉回路,即在图中找一个环使得每条边都在环上出现恰好一次. 一共两个子任务: 这张图是无向图.(50 分) 这张图是有向图.(50 分) 输入格式 ...

  10. Codeforces Round #348 (VK Cup 2016 Round 2, Div. 1 Edition) C. Little Artem and Random Variable 数学

    C. Little Artem and Random Variable 题目连接: http://www.codeforces.com/contest/668/problem/C Descriptio ...