首先创建数据库
我这里创建了一个名叫news的数据库，里面包含了2个数据表
我在“list“ 数据表是这样写的
“post“ 是这样的
写好以后记得点＂执行＂按钮
第二步：
创建一个db.php文件和一个list.php文件
在list.php文件中把换数据库的数据转换成API数据
在db.php建立MySQL连接
db.php代码如下
| <?php $servername = "localhost";//域名 $username = "root";//MySQL账户名 $password = "root";//MySQL密码 $dbname = "news";//数据库名
// 创建连接 $conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接 if ($conn->connect_error) { die("连接失败: " . $conn->connect_error); }
// 生成JSON格式 header('content-type:application/json'); ?>
|
然后在list.php里 把数据转换成API接口形式 代码如下
| <?php
require_once "db.php"; //引入上面写好的db.php文件，也就是连接数据库的代码
// mysql列表数据 $sql = "SELECT * FROM `list` ORDER BY `list`.`id` ASC"; //这个是SQL语句 $result = $conn->query($sql);
//存一个数组 $arr= [];
if ($result->num_rows > 0) {
// 输出数据 while($row = $result->fetch_assoc()) { // var_dump($row);
// 标题 $title = $row["title"]; // var_dump($title);
// 追加数组 array_push($arr,$title); } } else { echo "0 结果"; }
//输出接口数据 echo json_encode($arr);
// 关闭连接 $conn->close(); ?>
|
然后打开浏览器在这里输入localhost/这里写list.php文件的相对路径
我的是这样的localhost/API/list.php “API/list.php”<-这个就是我文件的相对路径进去后，就可以看到有数据输出了，输出的这个数据就是API接口数据
第三步
新建一个news文件夹，在这个文件夹下面新建一个网页文件 我这里就直接命名为“index“ 你们随意
在网页文件里写入以下代码
| <!DOCTYPE html> <html>
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="写网页描述内容"> <meta name="keywords" content="写搜索关键字"> <meta name="author" content="写作者名">
<link rel="shortcut icon" href="写log" type="image/x-icon"> <link rel="stylesheet" href="写CSS样式路径"> <title>网页标题</title> </head>
<body> <div id="myDiv">空的</div> <ul id="uid"></ul> <script> // 通过js请求列表( •̀ ω •́ )页接口数据，并展示出来 - 【AJAX 代码】 var xmlhttp;
//判断浏览器 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("myDiv").innerHTML = xmlhttp.responseText;
//拿到数据操作代码，让让数据显示 let res = xmlhttp.responseText; // 把请求到的后端接口，转换成json格式 res = JSON.parse(res); // console.log(res); for (let i = 0; i < res.length; i++) { // console.log(res[i]); // 通过DOM选择器,放入ul里 document.querySelector("#uid").innerHTML +="<li>"+res[i]+"</li>" }
} } // http://localhost/API/list.php 这是一个list.php文件 xmlhttp.open("GET", "http://localhost/API/list.php", true); xmlhttp.send(); </script> </body>
</html>
|
最后得到结果是MySQL数据库所返回的数据
我的是这样的
扫一扫
1882
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
