• PHP - AJAX 与 MySQL

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

    AJAX 数据库实例

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

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

    实例

     选择一个网站: Google /淘宝 /微博/ Facebook 

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

    实例解释 - MySQL 数据库

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

    1. mysql> select * from websites;
    2. +----+--------------+---------------------------+-------+---------+
    3. | id | name         | url                       | alexa | country |
    4. +----+--------------+---------------------------+-------+---------+
    5. | 1  | Google       | https://www.google.cm/    | 1     | USA     |
    6. | 2  | 淘宝       | https://www.taobao.com/   | 13    | CN      |
    7. | 3  | 微博       | http://weibo.com/         | 20    | CN      |
    8. | 4  | Facebook     | https://www.facebook.com/ | 3     | USA     |
    9. +----+--------------+---------------------------+-------+---------+
    10. 5 rows in set (0.01 sec)

    实例解释 - HTML 页面

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

    test.html 文件代码:

    1. <!DOCTYPE html> 
    2. <html> 
    3. <head> 
    4. <meta charset="utf-8"> 
    5. <title>菜鸟教程(runoob.com)</title> 
    6. <script>
    7. function showSite(str)
    8. {
    9.     if (str=="")
    10.     {
    11.         document.getElementById("txtHint").innerHTML="";
    12.         return;
    13.     } 
    14.     if (window.XMLHttpRequest)
    15.     {
    16.         // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    17.         xmlhttp=new XMLHttpRequest();
    18.     }
    19.     else
    20.     {
    21.         // IE6, IE5 浏览器执行代码
    22.         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    23.     }
    24.     xmlhttp.onreadystatechange=function()
    25.     {
    26.         if (xmlhttp.readyState==4 && xmlhttp.status==200)
    27.         {
    28.             document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    29.         }
    30.     }
    31.     xmlhttp.open("GET","getsite_mysql.php?q="+str,true);
    32.     xmlhttp.send();
    33. }
    34. </script>
    35. </head>
    36. <body>
    37.  
    38. <form>
    39. <select name="users" onchange="showSite(this.value)">
    40. <option value="">选择一个网站:</option>
    41. <option value="1">Google</option>
    42. <option value="2">淘宝</option>
    43. <option value="3">微博</option>
    44. <option value="4">Facebook</option>
    45. </select>
    46. </form>
    47. <br>
    48. <div id="txtHint"><b>网站信息显示在这里……</b></div>
    49.  
    50. </body>
    51. </html>

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

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

    PHP 文件

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

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

    getsite_mysql.php 文件代码:

    2. $q = isset($_GET["q"]) ? intval($_GET["q"]) : '';
    3.  
    4. if(empty($q)) {
    5.     echo '请选择一个网站';
    6.     exit;
    7. }
    8.  
    9. $con = mysqli_connect('localhost','root','123456');
    10. if (!$con)
    11. {
    12.     die('Could not connect: ' . mysqli_error($con));
    13. }
    14. // 选择数据库
    15. mysqli_select_db($con,"test");
    16. // 设置编码，防止中文乱码
    17. mysqli_set_charset($con, "utf8");
    18.  
    19. $sql="SELECT * FROM Websites WHERE id = '".$q."'";
    20.  
    21. $result = mysqli_query($con,$sql);
    22.  
    23. echo "
      31. ";
    31.  
    32. while($row = mysqli_fetch_array($result))
    33. {
    34.     echo "
      35. ";
    35.     echo "
      36. ";
    36.     echo "
      37. ";
    37.     echo "
      38. ";
    38.     echo "
      39. ";
    39.     echo "
      40. ";
    40.     echo "
      41. ";
    41. }
    42. echo "
      43. ID网站名网站 URLAlexa 排名国家
      " . $row['id'] . "" . $row['name'] . "" . $row['url'] . "" . $row['alexa'] . "" . $row['country'] . "
      "      ;
    43.  
    44. mysqli_close($con);
    45. ?>

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

    1. PHP 打开一个到 MySQL 数据库的连接
    2. 找到选中的用户
    3. 创建 HTML 表格，填充数据，并发送回 "txtHint" 占位符
  • 相关阅读:
    cocos入门3：新建项目
    HarmonyOS ArkTS List组件和Grid组件的使用（五）
    【三维目标检测】Part-A2（二）
    零代码编程：用ChatGPT根据视频标题来批量重命名字幕文件
    AWS聚焦数字经济与可持续发展
    第六章：Springmvc事务管理和配置文件xml详解和七大事务和注解@Transactional
    Mybatis逆向工程---在SpringBoot项目中构建Mybatis生成器
    Vue学习之计算属性
    win10安装配置ssh服务
    Docker Tutorial
  • 原文地址：https://blog.csdn.net/unbelievevc/article/details/126616725