源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 7914|回复: 0

[PHP编程] 详解html网页如何获取后台数据库的数据(html + ajax + php + mysql)

[复制链接]

1169

主题

1557

帖子

8820

金币

超级版主

Rank: 8Rank: 8

积分
19323
发表于 2022-7-6 11:40:40 | 显示全部楼层 |阅读模式
HTML是无法读取数据库的,HTML是页面前端脚本语言,要想从HTML网页中获取SQL数据库里的数据,需要借助JSP或ASP或PHP或RUBY等语言来实现。 简单的关系可以这样理解: 数据库<—>JSP或ASP或PHP或RUBY等语言<—>HTML
这里我们选取php作为我们的后端语言。(主要是别的语言我也不会呀,哈哈…)


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. <form>
  38. <select name="users" onchange="showSite(this.value)">
  39. <option value="">选择一个网站:</option>
  40. <option value="1">Google</option>
  41. <option value="2">淘宝</option>
  42. <option value="3">菜鸟教程</option>
  43. <option value="4">微博</option>
  44. <option value="5">Facebook</option>
  45. </select>
  46. </form>
  47. <br>
  48. <div id="txtHint"><b>网站信息显示在这里……</b></div>

  49. </body>
  50. </html>
复制代码

其中的 showSite() 函数会执行以下操作:

1、检查是否有网站被选择

2、创建XMLHttpRequest对象

3、创建在服务器响应就绪时执行的函数

4、向服务器的文件发送请求(这一步比较难以理解)

5、注意添加到URL末端的参数(q)(包含下拉列表的内容)

php文件代码

html调用的是getsite_mysql.php文件

该文件中的源代码会运行针对mysql数据库的查询,然后再html表格中返回结果。
代码如下:
  1. <?php
  2. $q = isset($_GET["q"]) ? intval($_GET["q"]) : '';

  3. if(empty($q)) {
  4.     echo '请选择一个网站';
  5.     exit;
  6. }

  7. $con = mysqli_connect('localhost','root','123456');
  8. if (!$con)
  9. {
  10.     die('Could not connect: ' . mysqli_error($con));
  11. }
  12. // 选择数据库
  13. mysqli_select_db($con,"test");
  14. // 设置编码,防止中文乱码
  15. mysqli_set_charset($con, "utf8");

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

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

  18. echo "<table border='1'>
  19. <tr>
  20. <th>ID</th>
  21. <th>网站名</th>
  22. <th>网站 URL</th>
  23. <th>Alexa 排名</th>
  24. <th>国家</th>
  25. </tr>";

  26. while($row = mysqli_fetch_array($result))
  27. {
  28.     echo "<tr>";
  29.     echo "<td>" . $row['id'] . "</td>";
  30.     echo "<td>" . $row['name'] . "</td>";
  31.     echo "<td>" . $row['url'] . "</td>";
  32.     echo "<td>" . $row['alexa'] . "</td>";
  33.     echo "<td>" . $row['country'] . "</td>";
  34.     echo "</tr>";
  35. }
  36. echo "</table>";

  37. mysqli_close($con);
  38. ?>
复制代码

还得在vscode上的php配置以及php环境搭建

可以参考脚本之家的这篇文章:

https://www.jb51.net/article/193704.htm

PHPstudy官网如下:

https://www.xp.cn/download.html

这里介绍下基于PhpStudy完成web配置

首页->一键启动选项修改一下



这里对于“网站”这一栏进行修改,给个域名,指定一下php文件的根目录



登录数据库

在PHPStudy里面启动mysql和apache,然后打开cmd,切换到mysql的bin文件下

  1. D:\>cd D:\phpstudy_pro\Extensions\MySQL5.7.26\bin
复制代码


然后输入:

  1. mysql -hlocalhost -uroot -p
复制代码


默认帐号和密码为root

  1. Welcome to the MySQL monitor.  Commands end with ; or \g.
  2. Your MySQL connection id is 2
  3. Server version: 5.7.26 MySQL Community Server (GPL)

  4. Copyright (c) 2000, 2019, Oracle and/or its affiliates. All rights reserved.

  5. Oracle is a registered trademark of Oracle Corporation and/or its
  6. affiliates. Other names may be trademarks of their respective
  7. owners.

  8. Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

  9. mysql>
复制代码

mysql的table准备

建表语句:

  1. CREATE TABLE Websites
  2. (
  3.     id INT,
  4.     name VARCHAR(255),
  5.     url VARCHAR(255),
  6.     alexa INT,
  7.     country VARCHAR(255)
  8. ) character set = utf8;  

复制代码


插入数据:

  1. insert into Websites values(1,'Google','https://www.google.cm/',1,'USA');
  2. insert into Websites values(2,'淘宝','https://www.taobao.com/',13,'CN');
  3. insert into Websites values(3,'菜鸟教程','http://www.runoob.com/',4689,'CN');
  4. insert into Websites values(4,'微博','http://weibo.com/',20,'CN');
  5. insert into Websites values(5,'Facebook','https://www.facebook.com/',3,'USA');
复制代码

  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://www.runoob.com/    | 4689  | CN      |
  8. | 4  | 微博       | http://weibo.com/         | 20    | CN      |
  9. | 5  | Facebook     | https://www.facebook.com/ | 3     | USA     |
  10. +----+--------------+---------------------------+-------+---------+
复制代码


将html文件和php文件项目放入WWW文件夹下

必须要在D:\phpstudy_pro\WWW下放入php执行文件,否则文件不会执行的。

这里新建一个文件夹D:\phpstudy_pro\WWW\NewProject,里面的文件如下:



这里对上面的html代码和php代码进行微调:

html修改部分如下:

  1. // 注意此时这个写法是有问题的
  2. xmlhttp.open("GET","index.php?q="+str,true);
复制代码


php修改部分如下:

  1. $con = mysqli_connect('www.test.com','root','root');
复制代码


跨域问题以及解决方案

按照我的理解此时应该是没有问题的,点击html网站的复选框,就应该渲染出结果来。

但是此时是有问题的,经过排查发现是下面代码中的



xmlhttp.status的值为0.

参考下面两个文章,解决了这个问题:

AJAX问题之XMLHttpRequest status = 0

xmlhttp.status为0的原因及其解决方案

有两处需要修改:

html:

  1. xmlhttp.open("GET","http://www.test.com/index.php?q="+str,true);
复制代码

与之前区别在于加上了http://www.test.com/

php:
  1. <?php
  2. header("Access-Control-Allow-Origin:*");
复制代码


在头部加上了一个header

下面是原因分析:

1、为什么state为0:xmlhttp自己在模拟,因为根本就没通过服务器。本地直接打开而已。OPENED了,所以status为0

基于此,我修改了html中代码,使其通过http访问,但是只是如此的话还是不能获取数据,这涉及到了另外一个问题了:跨域

先简单介绍下跨域基本概念:

首先一个url是由:协议、域名、端口 三部分组成。(一般端口默认80)

如:https://blog.moonlet.cn:80

当一个请求url的协议、域名、端口三者之间的任意一个与当前页面url不同即为跨域。

跨域产生的原因:

出于浏览器的同源策略限制。

同源策略(Same Orgin Policy)是一种约定,它是浏览器核心也最基本的安全功能,它会阻止一个域的js脚本和另外一个域的内容进行交互,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。。所谓同源(即在同一个域)就是两个页面具有相同的协议(protocol)、主机(host)和端口号(port)。

所以我们的html虽然去访问了http://www.test.com/index.php,但是浏览器跨域的返回头没有允许,所以浏览器阻止,添加Access-Control-Allow-Origin这个属性可以解决这个问题。
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-6-25 13:16 , Processed in 0.100564 second(s), 25 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明