HTML+Java页面渲染数据

鹅纷斐，

已于 2022-08-10 11:52:40 修改

阅读量189

点赞数

分类专栏：笔记前端 JavaScript 文章标签： html javascript 前端 intellij-idea ajax

于 2022-08-01 16:45:44 首次发布

本文链接：https://blog.csdn.net/weixin_42181264/article/details/126101979

版权

笔记同时被 3 个专栏收录

27 篇文章 0 订阅

订阅专栏

前端

15 篇文章 1 订阅

订阅专栏

JavaScript

7 篇文章 0 订阅

订阅专栏

项目运行之后，进入页面但不是通过事件（比如点击事件）来实现数据渲染，进入即渲染
以填充div为例：
html代码：

<div class="new_box" id="new_box" style="margin-left: 1%">
                    <p class="new_time" type="text" id="1">{{ list.data}}</p>
                    <p class="new_title" id="2">{{ list.data}}
                        <a href="#" target="_blank" style="text-decoration: none" id="3">{{ list.data }}</a>
                    </p>
                    <div style="width: 90%" id="4">
                        <img />{{ list.data}}</div>
                </div>

Javascript代码：

window.onload = function (){
        $.ajax({
            url: "",
            type: "",
            dataType: "json",
            success:function (msg){
                showData(msg);
            },
            error:function (msg){
                alert("出错啦!!!");
            }
        });
    };
    function showData(msg){
        var str="";
        var p = msg.list;
        $.each(p,function (index,item){
        	document.getElementById("1").innerHTML=item.data;
            document.getElementById("2").innerHTML=item.data;
            document.getElementById("3").innerHTML=item.data;
            console.log(msg)
        })
    }

更正—展示前四条数据

function showData(msg){
        var str="";
        var p = msg.list;
        $.each(p,function (index,item){
            for (var i=0;i<10;i++){
                document.getElementById(i+"n_releaseTime").innerHTML=msg.list[i].releaseTime.substr(0,10);
                document.getElementById(i+"n_newsTitle").innerHTML=msg.list[i].newsTitle;
                document.getElementById(i+"n_releasePictures").innerHTML=msg.list[i].releasePictures;
                console.log(msg)
            }
        })
    }