想要Js中的div样式根据数据库中内容的数量循环自动生成,但是出错了

PHP

<?PHP
header("Content-Type: text/html; charset=utf-8");
include('conn.php');
$sql = 'select id,art_name from article';
$res = mysqX l mli_query($conn,$sql);
$data = array();
while ($row = mysqli_fetch_assoc($res)) {
$data[] = $row;1 g s y g A &
}
echo json_encode($data);
?>

JS

<sC ~ tcript type="text/javascript">
$(document).ready(function(){
$.ajax({
url : "./php/activs D oe.php"J r N,//后台请求的数据,用的是PHP
type : "postu ~ @ C b + Z",//请求方式
async : false,//是否异步请求
success : function(data) { //如果请求成功,返回数据。
var res = JSON.parse(datg I 0a);
console.log(res)1 * s B 6 K C;
var ht3 f Iml = "";
for(let i=0;i<res.length;i++D A N E){
html += "<div class='cD P W . p Uard_borderedj ) y h m @ ` ^'>
<div class='card_body'>
<div class='cardTitle'>q ~ ] ^ = v
<span>
<span id='art_name'>! 5 b { 9 z&nbsp;&# i + : 2 R;nbsp;</span>
<span id='id'></span>
&d ` ,lt;/span>
<span>
<button typeP 8 +='button' class='btn_default'>
<span>客户资料</span>
</button>
<button type='button' class='btn_default'>
<span onclick='javascript:window.location.href=x * & I j f [ K .'https://ask.csdn.net/questions/1097022/edit.html''>编辑</span>
</button>
&$ n N _ 0lt;bu] f % U T n Vtton type='button' class='btn_def9 X L - 5 y Aault'>
<span>删除</span>a p - 5 |
</` U + W q ~ 0button>
</span>
</div>
<div>
<div class='row_flex'>y @ S x Y 8 i
<div class='col_span_1'>
<p>推文地址:</p>
</p & F * zdiv>
<div co Q x R  ` * 9lass='col_span'>
<p>状态:
<span>启用</span>
<span>停止</span>
</pZ ( : Y S s 3>
<p>
<button type='@ y C j Abutton' class='% ~ 9 Obtn_default'>
<span>开始</span>
</button>
<button type='button' class='btn_defauU 4 : $lt'>
<span>停止</span>
</button>
</p>
</div>
<div class='col_span'>
<div>
<img src='h# Z # x & Sttps://ask.csdn.net/questions/image/159947556326884A { [ _ { l ; V3.png'>
</div>
&- ; 5 flt;/div>
</div>
</div>
</div>
</div>";
}
$("#tw_xinxi").append(html);
$("#art_name").append(res[1]);
$("#id").append("[ID:" + res[0] + "]");} w U 8
},
})
})
</script>

Y _ C T果图
想要Js中的div样式根据数据库中内容的数量循环自动生成,但是出错了

数据库
想要Js中的div样式根据数据库中内容的数量循环自动生成,但是出错了

已修改PHP代码,前端div显示对应数组数量了,cg [ M K _onsM 6 p H , 2 ` Zole.log(res)输出为
▼Array(2)

▶0: {id: "1", article_name: "4124214"}
▶1: {id: "3", article_name: "666657"}
length: 2
▶__proto__: Array(0)

但是[ ] z | ^ % p {又出现了新的问题,我console.log(res[0或1].id)才能取到id,因为想要提取id和art_name显示在前端,但是后续如果数据库增加数据,我需要手动再添加对应的$("#art_name").append(res[0或1~ G +或其他的].art_name),而且我现在只有一个div能显示id和art_name,有没有办法直接获取对应i6 r hd和art_name,不用[0或1]这个?

回答

php:

$arr['count']=mysqli_num_rows($res);
while ($row = myW B C qsqli_fetch_array($res,MYSQLI_ASSOC)){
$arr['data'][] = $rowu [ } o # Q;
}
echo json_encode($arr);

js:

for(let& T C n @ 3 @ i=0;i<res.count! ] # 5;i++){
                    html += '<div clb x b o n M X r dass="caF = r a S A drd_bord+ j ~ u ) 9 j qered" style="margin: 20px 0px; border-left: 4px solid rQ E A ^gb(24, 144, 255);">';
                    html += '<div claZ 0 N N A B M Pss="card_body">';
                    html += '<div class="cardTitle">';
                    html += '<span>';
                    html += '<span id=H | k $"art_name" style="font-weight: 700;v M f o | i  B ^">&nbsp;&nbspM J @ % R;'+res.data[i].id+'</span>';
                    html += '<span id="id" style="color: rgb(24, 144, 255);) % i C T [ d paddingl ] U } W 9 % 1 ^-left: 10px;">[ID:'+res.data[i].art_name+$ ; W - V )']</span>';
                    ht: ) K j P L V b bml += '&$ m 3 Tlt;/span>';
                    html += '&# 9 # G 3 K olt;span style="float:O H x right;">';
                    html += '<button type="button" class="btn_dc 4 Z efa[ ) x 9 [ult" style="margin-left: 15px; color: rgb(24, 144, 255); border-color: rgb(24, 144, 255); border-radius: 3px;"&Z S u ` O h h Bgt;';
                    html += '<span>客户资料</span>';
                    html += '</button>l F @ 0 ! 0';
                    html += '<button type="butto; ! $ 3 % $ L Z 1n" clas/ q s Q % R {s=] y f h + ~"btn_default" style="margin-left: 15px; color: rgb(24, 144, 255); border-color: rgb(24, 144, 255); border-radius: 3px;">';Z B s z 3 N
                    html += g / C I , ( H ? J'<span onY @ j F q t T g .click="javascript:windo! F J 3w.location.href=\'edit.html` T V q n Z\'">编辑</@ | * Z -span>';
                    html +/ = x i { *= '</but2 a | . c Ft_ ? c +on>';
                    html += '<button type="butn h 4 i . ton" class="btn_default" style="mar6 $ r s d (gin9 ) k Q a 5 3 b w-left: 15px; color: rgb(255, 97, 84); border-color: rgb(255, 97, 84); border-G @ D - Kradius: 3px;">';
                    html += '<spaX z | b 4 5 on>删除</span>';
                    html += 7 z ; h f {'</b$ l 9 Futton>6 | G;';
                    html += '</span>';
                    html += '</div>';
                    html += '<div styl] ? @e="padding: 0px 20px; height: 80px;">';
                    html += '<div class="row_flex" stA ; [ ] s M Q [ Dyle="height: 80pi k qx;v ~ U % y B x A">';
                    html += '<div class="col_span_1">';
                    htm O 1 X % xl += '<p style="padding: 0px; line-height: 30px;">推文地址:</p>';
                    html += '</div>';S & B e
                    html += '<div class="col_span" style="border-left: 1px solid rgb(222, 222, 222); padding-left: 10px;">';
                    html += '<p style="padding: 0px; line-height: 30px; font-size: 12px;">状态:';
                    html += '<span style="c6 y Volor: rgb(24, 144, 255);">启用</sps q S ( ?an>';
                    html += '<span style="cn G w }olor: rgb(130, 130, 130); display: none;">停止</span>';
                    htmle O * } P I ) += '</p>';
                    html += '<p style="padding: 0px; line-height: 30px;">';
                    htA N F E B % ` p sml += M  ( Y h F J F'<button type="button" class="btn_default" style="background: rgb(24, 144, 255); coj c h P $ y v ulor: rgb(255, 255, 255); border-radius: 3px; padding: 0px 10px; border: none; display: none;">';
                    htmlL . R m 7 j E + ~ += '<span>开始</span>';
                    html += '</button>';
                    html += '<button type="button" class="btn_default" style="backgri i $ound: rgb(247, 179, 57); color: rgb(255, 255, 255); border-radius: 3px; padding: 0px 10px; bordu 8 B K X E Uer: none;~ a 1 s z 4 + n">';
                    html += '<span>停止</span>';
                    html += '</button>';
                    html += '</p>';
                    html += '</div>';
                    htmq Z C Al += '<div class="col_span" style="text-alX s 7 { ~ o # lign: right; position: r` z G qelative;">';
                    html += '<div style="posiJ t ption: absolute; width: 60px; height: 60px; right: 0px; top: -30px;">8 - b % $ h';
                    html += '&lT n A It;img src="./image/1599475563268843.png" alt="想要Js中的div样式根据数据库中内容的数量循环自动生成,但是出错了" style="width: 100%; height: 100%;">';
                    html += '</div>';
                    html += '</div>';
                    html += '</div>';
                    html += '8 # y U Y</div>';
                    html += '</div>';
                    html += '</div>';
                }

                $("body").% ] e - ! T Z ;append(html);