广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 数据库 >html网页如何获取后台数据库的数据(html + ajax + php + mysql)
  • 844

0
分享到

html网页如何获取后台数据库的数据(html + ajax + php + mysql)

ajaxphp数据库html前端 2023-09-03 14:09:20 844人浏览 八月长安
摘要

博主联系方式： QQ:1540984562 QQ交流群：892023501 群里会有往届的smarters和电赛选手，群里也会不时分享一些有用的资料，有问题可以在群里多问问。 目录 ht

博主联系方式：
QQ:1540984562
QQ交流群：892023501
群里会有往届的smarters和电赛选手，群里也会不时分享一些有用的资料，有问题可以在群里多问问。

目录

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">Googleoption><option value="2">淘宝option><option value="3">菜鸟教程option><option value="4">微博option><option value="5">Facebookoption>select>form><br><div id="txtHint"><b>网站信息显示在这里……b>div> body>html>

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

检查是否有网站被选择

创建XMLHttpRequest对象

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

向服务器的文件发送请求（这一步比较难以理解）

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

php文件代码

html调用的是getsite_mysql.php文件

该文件中的源代码会运行针对mysql数据库的查询，然后再html表格中返回结果。
代码如下：

$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 "";while($row=mysqli_fetch_array($result)){echo"";echo"";echo"";echo"";echo"";echo"";echo"";}echo"
ID网站名网站 URLAlexa 排名国家
        
     " . $row['id'] . "     " . $row['name'] . "     " . $row['url'] . "     " . $row['alexa'] . "     " . $row['country'] . "     
 
"; mysqli_close($con);?>

解释如下：

当查询从js发送到php文件时，会发生：

php打开一个到mysql数据库的连接

找到选中的用户

创建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 2Server 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 itsaffiliates. Other names may be trademarks of their respectiveowners.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:

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这个属性可以解决这个问题。

来源地址：https://blog.csdn.net/qq_42604176/article/details/121843235

您可能感兴趣的文档:
点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: html网页如何获取后台数据库的数据(html + ajax + php + mysql)

本文链接: https://www.lsjlt.com/news/392341.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • html网页如何获取后台数据库的数据(html + ajax + php + mysql)
    博主联系方式： QQ:1540984562 QQ交流群：892023501 群里会有往届的smarters和电赛选手，群里也会不时分享一些有用的资料，有问题可以在群里多问问。 目录 ht...
    99+
    2023-09-03
    ajax php 数据库 html 前端
  • AJax如何获取后台数据在页面中渲染
    这篇文章给大家分享的是有关AJax如何获取后台数据在页面中渲染的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。1.先放一段ajax http://xxxxx/GCMS/dispat...
    99+
    2022-10-19
  • Ajax如何实现获取数据后显示在页面
    这篇文章主要介绍Ajax如何实现获取数据后显示在页面，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！主要功能流程介绍循环获取列表数据 点击列表数据进入详情页点击报名参加弹出报名成功提示...
    99+
    2022-10-19
  • ajax接收后台数据在html页面显示的示例分析
    这篇文章主要为大家展示了“ajax接收后台数据在html页面显示的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“ajax接收后台数据在html页面显示的...
    99+
    2022-10-19
  • ajax如何实现从后台拿数据显示在HTML前端
    小编给大家分享一下ajax如何实现从后台拿数据显示在HTML前端，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！HTML页面，ajax是基于id的，所有用id表示。...
    99+
    2023-06-08
  • jQuery中如何实现ajax请求后台返回json数据并渲染HTML
    小编给大家分享一下jQuery中如何实现ajax请求后台返回json数据并渲染HTML，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下...
    99+
    2022-10-19
  • 基于iframe如何实现ajax跨域请求以及获取网页中ajax数据
    这篇文章给大家分享的是有关基于iframe如何实现ajax跨域请求以及获取网页中ajax数据的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。大家都知道，在不同域的情况下是不能发送a...
    99+
    2022-10-19
  • 如何获取 MySQL 数据库的最后访问（和/或写入）时间？
    要获取上次访问时间，请尝试以下语法 -SELECT update_time FROM INFORMATION_SCHEMA.TABLES WHERE table_schema = 'yourDatabaseName&...
    99+
    2023-10-22
  • 如何使用python实现简单爬取网页数据并导入MySQL中的数据库
    前言：要使用 Python 爬取网页数据并将数据导入 MySQL 数据库，您需要使用 Requests 库进行网页抓取，使用 BeautifulSoup 库对抓取到的 HTML 进行解析，并使用 PyMySQL 库与 MySQL 进行交互。...
    99+
    2023-10-18
    python 数据库 爬虫
  • 如何在网页端登录阿里云的MySQL数据库
    在阿里云上管理MySQL数据库，需要通过网页端进行登录。这篇文章将详细解释如何进行操作。 在阿里云上管理MySQL数据库，可以通过网页端进行登录。下面我们将详细解释如何操作。步骤一：登录阿里云账号首先，需要在浏览器中输入阿里云的账号和密码进...
    99+
    2023-11-10
    阿里 数据库 网页
  • 如何使用PHP在网页中修改数据库的内容
    PHP是一种脚本语言，常用于编写动态交互式网页。与静态网页不同，动态网页的内容可以随时更新，通过与数据库交互，实现对网站内容的实时修改。本文将介绍如何使用PHP在网页中修改数据库的内容。首先，需要在网页中连接数据库。在PHP中，可以使用my...
    99+
    2023-05-14
    php
  • 我们如何从 MySQL Server 命令行获取特定数据库中的表列表？
    我们需要使用“mysqlshow”客户端程序以及数据库名称来获取特定数据库中的表列表。它的语法如下 -Mysqlshow – u root db_name [pat_matching]这里 db_name 是我们要从中获取表名称...
    99+
    2023-10-22
  • MySQL实战：如何设计一个常用的后台管理系统的数据库结构
    部分数据来源：ChatGPT   什么是后台管理系统？         后台管理系统是指用于管理和维护网站或应用程序的后台界面系统，通常包含用户管理、权限管理、数据管理等功能，能够方便快捷地管理网站或应用程序。常见的后台管理系统有Cms、O...
    99+
    2023-09-26
    数据库 mysql sql
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作