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

PHP

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

JS

<script type="text/javascript">
    $(document).ready(function(){
        $.ajax({
            url : "./php/active.php",//后台请求的数据,用的是PHP
            type : "post",//请求方式
            async : false,//是否异步请求
            success : function(data) { //如果请求成功,返回数据。
                var res = JSON.parse(data);
                console.log(res);
                var html = "";
                for(let i=0;i<res.length;i++){
                    html += "<div class='card_bordered' style='margin: 20px 0px; border-left: 4px solid rgb(24, 144, 255);'>
                    <div class='card_body'>
                        <div class='cardTitle'>
                            <span>
                                <span id='art_name' style='font-weight: 700;'>&nbsp;&nbsp;</span>
                                <span id='id' style='color: rgb(24, 144, 255); padding-left: 10px;'></span>
                            </span>
                            <span style='float: right;'>
                                <button type='button' class='btn_default' 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_default' 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_default' 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_span_1'>
                                    <p style='padding: 0px; line-height: 30px;'>推文地址:</p>
                                </div>
                                <div class='col_span' 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_default' 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_default' 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_span' style='text-align: right; position: relative;'>
                                    <div style='position: absolute; width: 60px; height: 60px; right: 0px; top: -30px;'>
                                        <img src='./image/1599475563268843.png' style='width: 100%; height: 100%;'>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>";
                }
                $("#tw_xinxi").append(html);
                $("#art_name").append(res[1]);
                $("#id").append("[ID:" + res[0] + "]");
            },
        })
     })
</script>

效果图
图片说明

数据库图
图片说明

已修改PHP代码,前端div显示对应数组数量了,console.log(res)输出为
▼Array(2)

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

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

4个回答

php:

$arr['count']=mysqli_num_rows($res);
while ($row = mysqli_fetch_array($res,MYSQLI_ASSOC)){
$arr['data'][] = $row;
}
echo json_encode($arr);

js:

for(let i=0;i<res.count;i++){
                    html += '<div class="card_bordered" style="margin: 20px 0px; border-left: 4px solid rgb(24, 144, 255);">';
                    html += '<div class="card_body">';
                    html += '<div class="cardTitle">';
                    html += '<span>';
                    html += '<span id="art_name" style="font-weight: 700;">&nbsp;&nbsp;'+res.data[i].id+'</span>';
                    html += '<span id="id" style="color: rgb(24, 144, 255); padding-left: 10px;">[ID:'+res.data[i].art_name+']</span>';
                    html += '</span>';
                    html += '<span style="float: right;">';
                    html += '<button type="button" class="btn_default" style="margin-left: 15px; color: rgb(24, 144, 255); border-color: rgb(24, 144, 255); border-radius: 3px;">';
                    html += '<span>客户资料</span>';
                    html += '</button>';
                    html += '<button type="button" class="btn_default" style="margin-left: 15px; color: rgb(24, 144, 255); border-color: rgb(24, 144, 255); border-radius: 3px;">';
                    html += '<span onclick="javascript:window.location.href=\'edit.html\'">编辑</span>';
                    html += '</button>';
                    html += '<button type="button" class="btn_default" style="margin-left: 15px; color: rgb(255, 97, 84); border-color: rgb(255, 97, 84); border-radius: 3px;">';
                    html += '<span>删除</span>';
                    html += '</button>';
                    html += '</span>';
                    html += '</div>';
                    html += '<div style="padding: 0px 20px; height: 80px;">';
                    html += '<div class="row_flex" style="height: 80px;">';
                    html += '<div class="col_span_1">';
                    html += '<p style="padding: 0px; line-height: 30px;">推文地址:</p>';
                    html += '</div>';
                    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="color: rgb(24, 144, 255);">启用</span>';
                    html += '<span style="color: rgb(130, 130, 130); display: none;">停止</span>';
                    html += '</p>';
                    html += '<p style="padding: 0px; line-height: 30px;">';
                    html += '<button type="button" class="btn_default" style="background: rgb(24, 144, 255); color: rgb(255, 255, 255); border-radius: 3px; padding: 0px 10px; border: none; display: none;">';
                    html += '<span>开始</span>';
                    html += '</button>';
                    html += '<button type="button" class="btn_default" style="background: rgb(247, 179, 57); color: rgb(255, 255, 255); border-radius: 3px; padding: 0px 10px; border: none;">';
                    html += '<span>停止</span>';
                    html += '</button>';
                    html += '</p>';
                    html += '</div>';
                    html += '<div class="col_span" style="text-align: right; position: relative;">';
                    html += '<div style="position: absolute; width: 60px; height: 60px; right: 0px; top: -30px;">';
                    html += '<img src="./image/1599475563268843.png" style="width: 100%; height: 100%;">';
                    html += '</div>';
                    html += '</div>';
                    html += '</div>';
                    html += '</div>';
                    html += '</div>';
                    html += '</div>';
                }

                $("body").append(html);
SL_Shuai
SL_Shuai 已对php进行调整,前端div没有问题了,想要输出id和art_name有点问题现在。
6 天之前 回复

article_list.append(html);
在这里
console.log(html)输出下 html 是什么

SL_Shuai
SL_Shuai 回复贵阳老马马善福专业维修游泳池堵漏防水工程: 是元素整体格式的问题,html里面倒是没问题,我改了格式,就能显示div样式了,但还是有问题,我这里显示4个div,我数据库中只有两条数据。
7 天之前 回复
caozhy
贵阳老马马善福专业维修游泳池堵漏防水工程 回复SL_Shuai: 感觉你的html里面有双引号没有转义
7 天之前 回复
SL_Shuai
SL_Shuai 输出出来的是html +=""引号里面div样式的代码,不过只输出了一次。
7 天之前 回复

上面代码一会用jquery的$("#"),一会用原生的document.getElementById

如果用jquery,那么就都用jquery,元素整体设置html,使用$("#id").html(html内容),追加内容使用$("#id").append(html内容)

另外

success : function(date) 

date应该用data,date表示日期,data表示数据,不止你一个出现这个问题,用python提问题的不下三个栽在这个date这个单词上(参数规定用data,结果传date),虽然你这里并不影响什么,但是建议还是要纠正,这是最基本的常识问题,程序里面的变量要尽量有意义而且正确

jingluan666
jingluan666 回复SL_Shuai: 要学会自己分析解决问题,这样你才能记得牢,掌握熟练
6 天之前 回复
jingluan666
jingluan666 回复SL_Shuai: 像这样的问题,最直接有效的方式就是多加几个console.log,看控制台输出,比如console.log('***'+变量1)、console.log('@@@'+变量2)
6 天之前 回复
SL_Shuai
SL_Shuai 感谢大佬,已经改格式了,果然是格式的问题,但是还是有问题,我这里输出了4个DIV,但是我的数据库只有两条数据。
7 天之前 回复

$arr[] = $row['id'];
$arr[] = $row['art_name'];

PHP文件这里不应该这样写,这样会出来一串一维数组,在前端无法正常解析

改成这样:

$arr = [];
while ($row = mysqli_fetch_array($res)){
    $arr[] = [
        'id' => $row['itemid'],
        'art_name' => $row['title']
    ];
}

图片说明
图片说明

wangkingben
wangkingben 回复SL_Shuai: 大哥,for循环里的i是局部变量,你拿到for外面肯定不存在的,这是程序最基础的知识,想用它就必须在循环里面完成数据处理与操作
6 天之前 回复
SL_Shuai
SL_Shuai 问题代码已更新。
6 天之前 回复
SL_Shuai
SL_Shuai 我已对PHP进行调整,我想要输出id和art_name在前端div中,console.log(res[i].id)放在for循环里面,能获取到两个id,$("#id").append("[ID:" + res[i].id + "]")在for里不报错但也不显示,在for循环外面,会报错,找不到i,我现在id和art_name输出不出来。
6 天之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐