怎么根据数据库自动增加前端页面上面的内容,并且编辑选项里面的内容获取不同ID的数据库内容?

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;">&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" 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>

JS:

<script>
//主页获取文章名称和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] + "]");
        },
    })
})
//编辑获取数据库数据
$(document).ready(function(){
    $.ajax({
        url : "./php/edit.php",//后台请求的数据,用的是PHP
        type : "post",//请求方式
        async : false,//是否异步请求
        success : function(msg) { //如果请求成功,返回数据。
            var data = JSON.parse(msg);
            $("#art_name").val(data[0]);
            editor.html(data[3]);
            $("#show2").append(data[3]);
            $("#input_name").val(data[4]);
            $("#btn_bt").append(data[4]);
            $("#input_number").val(data[5]);
            $("#cyrs").append(data[5]);
            $("#preview").attr("src",data[6]);
            $("#input_title").val(data[7]);
            $("#btnr").append(data[7]);
            $("#btnr2").append(data[7]);
            $("#input_describe").val(data[8]);
            $("#ljms").append(data[8]);
            console.log(data[6]);
        },
    })
})
</script>

PHP:

active.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);
?>
edit.php
<?PHP
    header("Content-Type: text/html; charset=utf-8");
    include('conn.php');//链接数据库
    $sql = "select * from article";
    $res = mysqli_query($conn,$sql);
    $arr = [];
    while ($row = mysqli_fetch_array($res)) {
        $arr[] = $row['article_name'];
        $arr[] = $row['check_box'];
        $arr[] = $row['radio_box'];
        $arr[] = $row['content'];
        $arr[] = $row['input_name'];
        $arr[] = $row['input_number'];
        $arr[] = $row['input_ewm'];
        $arr[] = $row['input_title'];
        $arr[] = $row['input_describe'];
        $arr[] = $row['input_image'];
    }
    echo json_encode($arr);
?>

数据库截图:

图片说明

前端截图:

图片说明
我前端测试,只做了一个内容,怎么根据数据库中的内容,自动增加像这样的条目,并且编辑会跳转页面,edit.php怎么获取不同条目的内容?

3个回答

给你提供一个思路
{tag("moduleid=21&condition=status=3 and level=6&areaid=$cityid&order=addtime desc&pagesize=6&target=_blank&template=list-indexcenternews")}
这个是在框架下的前端调用写法,tag调用后台的函数
function tag($parameter, $expires = -1) {
.....
include template($template, $dir);
}
函数中间调取数据库,template函数调取另外单独写的前端代码实现可变内容,比如table里的tr td中的数据

也就是模板html文件其实是嵌套的

wangkingben
wangkingben php端写错了
6 天之前 回复
SL_Shuai
SL_Shuai 回复wangkingben: 我重新弄了一下代码,最新的在另外一个问题里面,麻烦大佬帮忙看下哪里出现了问题。地址:https://ask.csdn.net/questions/1097022
7 天之前 回复
SL_Shuai
SL_Shuai 回复wangkingben:window.onload = function() { var article_list = document.getElementById('tw_xinxi'); var arr = "<?php echo $arr?>" var html = null; for(let i=0;i<arr.length;i++){ html +="我的自定义div"; } article_list.append(html); } JS改成了这样,ajax放到了ajax.js里,我现在JS拿不到PHP里面的$arr返回的值,该怎么拿?
7 天之前 回复
wangkingben
wangkingben 回复SL_Shuai: 也就是你在js拿到的data其实是后端返回的数组,在前端要还原成js识别的数组格式,这样循环出数组里内容
7 天之前 回复
wangkingben
wangkingben 回复SL_Shuai: 你用jq从后台请求回数据以后,根据数据量条数循环出来apend到div里面就可以了
7 天之前 回复
SL_Shuai
SL_Shuai 没看懂...我现在换了一种方法,我把div放到了js里,用js生成div,然后根据php返回的值,循环生成div,再将js的div插入这个div,JS生成前端DIV我已经完成了,我目前卡在了怎么判断这个循环上面。
7 天之前 回复
SL_Shuai
SL_Shuai 用链接里面的方法改正试过,不行,他里面是表格,在HTML前端显示表格,PHP后端获取数据然后填充表格,我的是根据ID,生成DIV样式,数据库表里面有2个ID,就生成2个DIV,如前端截图样式一样,每个ID一个这个样式,您这个链接里面的和我相差甚远,没有获得解决思路。
8 天之前 回复

写了一个bat文件(偷奸耍滑)每5秒调用一次php文件,专门监听数据库变化

SL_Shuai
SL_Shuai 这个是之前的代码,后面调整过了,虽然还是有问题,问题和这个不一样,在我的另外一个问题里。https://ask.csdn.net/questions/1097022
6 天之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问