PHP
<?PHP
header("Content-Type: text/html; charset=utf-8");
include('conn.php');//链接数据库
$sql = "select * from article";
$res = mysqli_query($conn,$sql);
// 创建backResult空对象
$arr = [];
// 执行while循环语句,循环数据库查询的结果集,并使用fetch_array()取出每条记录
while ($row = mysqli_fetch_array($res)){
$arr[] = $row['id'];
$arr[] = $row['article_name'];
}
// 打印返回给前台的json数据
echo json_encode($arr);
?>
Ajax
//主页获取文章名称和id
$(document).ready(function(){
$.ajax({
url : "./php/active.php",//后台请求的数据，用的是PHP
type : "post",//请求方式
async : false,//是否异步请求
success : function(msg) { //如果请求成功，返回数据。
var res = JSON.parse(msg);
$("#article_name").append(res[1]);
$("#id").append("[ID:" + res[0] + "]");
},
})
})
前端HTML此处模块
<div class="article-list" id="tw_xinxi">
<div class="card " style="margin: 20px 0px; border-left: 4px solid rgb(24, 144, 255);">
<div class="card_body">
<div class="cardTitle">
<span>
<span id="article_name" style="font-weight: 700;"> </span>
<span id="id" style="color: rgb(24, 144, 255); padding-left: 10px;"></span>
</span>
<span style="float: right;">
<button type="button" class="btn" style="margin-left: 15px; color: rgb(24, 144, 255); border-color: rgb(24, 144, 255); border-radius: 3px;">
<span>客户资料</span>
</button>
<button type="button" class="btn" style="margin-left: 15px; color: rgb(24, 144, 255); border-color: rgb(24, 144, 255); border-radius: 3px;">
<span onclick="javascript:window.location.href='edit.html'">编辑</span>
</button>
<button type="button" class="btn" style="margin-left: 15px; color: rgb(255, 97, 84); border-color: rgb(255, 97, 84); border-radius: 3px;">
<span>删除</span>
</button>
</span>
</div>
<div style="padding: 0px 20px; height: 80px;">
<div class="row_flex" style="height: 80px;">
<div class="col">
<p style="padding: 0px; line-height: 30px;">推文地址：</p>
</div>
<div class="col" style="border-left: 1px solid rgb(222, 222, 222); padding-left: 10px;">
<p style="padding: 0px; line-height: 30px; font-size: 12px;">状态：
<span style="color: rgb(24, 144, 255);">启用</span>
<span style="color: rgb(130, 130, 130); display: none;">停止</span>
</p>
<p style="padding: 0px; line-height: 30px;">
<button type="button" class="btn" style="background: rgb(24, 144, 255); color: rgb(255, 255, 255); border-radius: 3px; padding: 0px 10px; border: none; display: none;">
<span>开始</span>
</button>
<button type="button" class="btn" style="background: rgb(247, 179, 57); color: rgb(255, 255, 255); border-radius: 3px; padding: 0px 10px; border: none;">
<span>停止</span>
</button>
</p>
</div>
<div class="col" style="text-align: right; position: relative;">
<div style="position: absolute; width: 60px; height: 60px; right: 0px; top: -30px;">
<img src="二维码" style="width: 100%; height: 100%;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我将数据库中的数据显示在前端中，做完后才发现，整个div写在了前端里，是静态的，只能对我绑定的ID数据进行删除与修改，做错了。
我通过其他模块又新建了一条数据，存到数据库中，因为是静态的，所以栏目还是一条，怎么改能根据数据库的ID自动生成这样的DIV？
