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-AJAX 数据库实例的更多相关文章

  1. 使用ajax+php+mysql实现数据库定时刷新

    php版本5.5.9,mysql版本5.7. 所以php链接mysql就是使用mysql_connect. 如果遇到了连接时没有成功也没有失败的情况时,就重启mysql,或重启docker(睡一觉就好 ...

  2. 通过Python实现mysql查询数据库实例

    #coding:utf-8 ''' Created on 2017年10月25日 @author: li.liu ''' import pymysql db=pymysql.connect('loca ...

  3. AJAX 与 MySQL

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

  4. PHP - AJAX 与 MySQL

    PHP - AJAX 与 MySQL AJAX 可用来与数据库进行交互式通信. AJAX 数据库实例 下面的实例将演示网页如何通过 AJAX 从数据库读取信息: 本教程使用到的 Websites 表 ...

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

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

  6. PHP 和 AJAX MySQL 数据库实例

    HTML 表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  7. PHP 实例 AJAX 与 MySQL

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

  8. 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 ...

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

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

随机推荐

  1. Red Hat Enterprise Linux 6上安装Oracle 11G(11.2.0.4.0)缺少pdksh包的问题

    RHEL 6上安装Oracle 11G警告缺少pdksh包 前言 相信很多刚刚接触学习Oracle的人,在RHEL6上安装11.2.0.3 or 11.2.0.4这两个版本的时候, 都遇到过先决条件检 ...

  2. 从CAS讲起,真正高性能解决并发编程的原子操作

    今天是猿灯塔“365天原创计划”第1天. 一.原子性操作 原子性操作:原子性在一个操作是不可中断的,要么全部执行成功要么全部执行失败,有着“同生共死”的感觉.及时在多个线程一起执行的时候,一个操作一旦 ...

  3. sun.reflect.generics.reflectiveObjects.TypeVariableImpl cannot be cast to java.lang.Class

    1.首先,问题出现的点是在泛型 我出现问题的原因是,和泛型有关系,要调整泛型 2.我把问题出现的过程描述一哈子 1.基础类 @tk.mybatis.mapper.annotation.Register ...

  4. BZOJ 2200 道路与航线(图论)

    BZOJ 2200 道路与航线 题目大意 有两种路,一种没负数,一种没环,求单源最短路. solution 存在负边权Dij一定不能用嘛,显然不是 根据题意能看出来是tarjan,将双向边缩点,得到的 ...

  5. JAVA基础笔记15-16-17-18

    十五.今日内容介绍 1.Object 2.String 3.StringBuilder =第一节课开始======================= 01API概念 * A:API(Applicati ...

  6. MongoDB 逻辑还原工具mongorestore

    mongorestore是官方提供用来还原导入由mongodump导出生成的二进制备份文件的工具,通常与mongodump配合使用,关于mongodump工具的使用可以参考另一篇博文:MongoDB ...

  7. HBuilder生成证书

    一.安装jdk https://www.oracle.com/java/technologies/javase-downloads.html 二.打开CMD命令到JDK安装目录bin文件夹下 执行命令 ...

  8. Qt_Demo3:实现棋盘

    1  简介 参考视频:https://www.bilibili.com/video/BV1XW411x7NU?p=53 说明:实现一个8*8的棋盘,点击棋盘的任意位置显示一个表情,并打印出当前的坐标( ...

  9. MySQL和PHP中以整型存储IP地址

    正文:将IP地址以整型存储 一般我们在数据库中会用到ip地址用来查记录的等等,而ip地址是分为四段的,一般是用varchar或char类型存储.但是其实有更好的存储方法就是以整型存储IP地址. 因为c ...

  10. Pycharm无法安装第三方库,错误代码Non-zero exit code (1) 的解决方案之pip升级

    软件测试,B站爱码小哥邀你同行! 进入主题 问题场景:在pycharm进行安装某些库,install失败,提示需要升级pip ,报错界面问题如下错误代码Non-zero exit code 大致意思是 ...