html网页如何获取后台数据库的数据(html + ajax + php + mysql)
目录
- html代码
- php文件代码
- 还得在vscode上的php配置以及php环境搭建
- 基于PhpStudy完成web配置
- 登录数据库
- mysql的table准备
- 将html文件和php文件项目放入WWW文件夹下
- 跨域问题以及解决方案
HTML是无法读取数据库的,HTML是页面前端脚本语言,要想从HTML网页中获取SQL数据库里的数据,需要借助JSP或ASP或PHP或RUBY等语言来实现。 简单的关系可以这样理解: 数据库<—>JSP或ASP或PHP或RUBY等语言<—>HTML
这里我们选取php作为我们的后端语言。(主要是因为菜鸟教程里面是这样用的…)
这里可以参考一下::PHP - AJAX 与 MySQL
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() 函数会执行以下操作:
1、检查是否有网站被选择
2、创建XMLHttpRequest对象
3、创建在服务器响应就绪时执行的函数
4、向服务器的文件发送请求(这一步比较难以理解)
5、注意添加到URL末端的参数(q)(包含下拉列表的内容)
php文件代码
html调用的是getsite_mysql.php
文件
该文件中的源代码会运行针对mysql数据库的查询,然后再html表格中返回结果。
代码如下:
<?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);
?>
解释如下:
当查询从js发送到php文件时,会发生:
1、php打开一个到mysql数据库的连接
2、找到选中的用户
3、创建HTML表格,填充数据,并发送"txtHint"占位符
还得在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文件下
D:\>cd D:\phpstudy_pro\Extensions\MySQL5.7.26\bin
然后输入:
mysql -hlocalhost -uroot -p
默认帐号和密码为root。
Welcome to the MySQL monitor. Commands end with ; or \g.
Your MySQL connection id is 2
Server version: 5.7.26 MySQL Community Server (GPL)Copyright (c) 2000, 2019, Oracle and/or its affiliates. All rights reserved.Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.mysql>
mysql的table准备
建表语句:
CREATE TABLE Websites
(id INT,name VARCHAR(255),url VARCHAR(255),alexa INT,country VARCHAR(255)
) character set = utf8;
插入数据:
insert into Websites values(1,'Google','https://www.google.cm/',1,'USA');
insert into Websites values(2,'淘宝','https://www.taobao.com/',13,'CN');
insert into Websites values(3,'菜鸟教程','http://www.runoob.com/',4689,'CN');
insert into Websites values(4,'微博','http://weibo.com/',20,'CN');
insert into Websites values(5,'Facebook','https://www.facebook.com/',3,'USA');
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 |
+----+--------------+---------------------------+-------+---------+
将html文件和php文件项目放入WWW文件夹下
必须要在D:\phpstudy_pro\WWW
下放入php执行文件,否则文件不会执行的。
这里新建一个文件夹D:\phpstudy_pro\WWW\NewProject
,里面的文件如下:
这里对上面的html代码和php代码进行微调:
html修改部分如下:
// 注意此时这个写法是有问题的
xmlhttp.open("GET","index.php?q="+str,true);
php修改部分如下:
$con = mysqli_connect('www.test.com','root','root');
跨域问题以及解决方案
按照我的理解此时应该是没有问题的,点击html网站的复选框,就应该渲染出结果来。
但是此时是有问题的,经过排查发现是下面代码中的
xmlhttp.status的值为0.
参考下面两个文章,解决了这个问题:
AJAX问题之XMLHttpRequest status = 0
xmlhttp.status为0的原因及其解决方案
有两处需要修改:
html:
xmlhttp.open("GET","http://www.test.com/index.php?q="+str,true);
与之前区别在于加上了http://www.test.com/
php:
<?php
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这个属性可以解决这个问题。
html网页如何获取后台数据库的数据(html + ajax + php + mysql)相关推荐
- html通过php获取mysql数据_怎样借助PHP从HTML网页中获取phpmyadmin数据库里数据表的内容...
这是我以前写的,先把文档改成 .php格式,代码写在html最后,$sql = "SELECT num,foodname, foodprice, foodcontent,foodImg FR ...
- axios获取后台数据库中的数据
目录 axios获取后台数据库数据 一.axios库 二.步骤 1.前端代码 2.servlet代码 3.查询数据库代码 4.member类的定义 总结 axios获取后台数据库数据 用jsp页面的话 ...
- 【看板】ajax动态获取后台传来json数据,加载到页面表格中
ajax动态获取后台传来json数据,加载到页面表格中 摘要 1.WebApi 2.看板HTML 3.ajax获取后台传来的数据:在这里要注意声明提升,所以需要在for循环外var str1 = &q ...
- 如何用 ajax 连接mysql数据库,并且获取从中返回的数据。ajax获取从mysql返回的数据。responseXML分别输出不同数据的方法。...
开讲前,先说下网上,大部分的关于这方面的博文或者其他什么的,就我自己的感觉,第一说得不详细,第二语言不能很好的被初学者了解. 我这篇博文的标题之所以用了三句,是为了方便其他人好查找: 这里介绍的方法有 ...
- java web mysql视图_Javaweb项目-下拉列表显示后台数据库的数据
下面将演示前端下拉列表显示后台数据库中class表的说有班级的名称 环境: Tomcat-8.5.40 mysql-8.0.13 eclipse-4.9.0 springmvc框架 一.从mysql中 ...
- solr使用网页浏览器批量导入数据库中数据(本案例是mysql)
如果想要知道如何安装solr,集成IKAnalyzer中文分词器,批量导入数据库数据,java使用参照以下本博主博文: 安装solr https://blog.csdn.net/u013294097/ ...
- mysql两个数据库表数据同步_php同步mysql两个数据库中表的数据
分别创建两个数据库和两张表 study库-zone表 teaching库-area表 //****SQL脚本****// 1.创建teaching数据库area数据表 create database ...
- 低版本mysql数据导入高版本_将高版本mysql数据库的数据导入低版本mysql中
前言 最近做了个网站,准备放到虚拟主机上的时候,发现本地数据库是mysql5.6,服务器上的mysql是5.0的.于是尝试导出数据,结果,导入的数据不是出错,就是各种乱码.折腾了好久之后,终于找到了解 ...
- AngularJS + Java---前台网页与后台数据库传递数据 基本结构
第一个关于这两种语言的项目,以下只是我自己的理解,欢迎指教:) 基本对应关系 1. controller .jsp(.html) ng-controller="controllerTest ...
最新文章
- 软路由 文件服务器拒绝,软路由踩坑
- 深入理解Openstack自动化部署
- C++对C的加强之register关键字增强
- ThreadLocal与Synchronized的用法
- 数据算法之二叉树插入(BinaryTreeL Insert)的Java实现
- android fragment 抽屉,如何从Fragment Android中禁用或隐藏抽屉布局
- 什么是微网格?微网格规划应考虑哪些因素?
- EGE基础:键盘输入篇
- CodeSmith简单示例
- Html Imput 的用法
- 如何自己动手免费申请软件著作权
- 15本职场必读书,得挑几本看看!
- 开发人员的不断流动、让我们更加坚定信念,一定要控制好整个系统的底层架构、核心设计、日常质量检查工作
- 周易六十四卦——同人卦
- 【SwiftUI学习笔记】Git Repository Creation FailedEnsure the author information supplied in Xcode ...
- Microsoft word 中的题注修改后更新的问题
- 《过故人庄》古诗鉴赏
- 【CYH-01】小奔的国庆练习赛:赛后标程
- 为什么谷歌不会发生“魏则西事件”?
- 用HTML写的HTML笔记大全✌