html关于如何从后台获取数据到页面（动态网页）2

最新推荐文章于 2021-05-25 16:18:25 发布

alsdiuhfeircn

最新推荐文章于 2021-05-25 16:18:25 发布

阅读量4.2k

点赞数 5

分类专栏： html+css 文章标签：从后台获取视频资源

本文链接：https://blog.csdn.net/alsdiuhfeircn/article/details/90672434

版权

html+css 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

1（上文）是简单的获取图片的一个动态网页实现方式。
在写本文之前先实现一个可以实现vedio的上传的代码，如下
数据格式+api地址

{
    "code": "1", 
    "msg": "获取成功",
    "data": [
        {
            "index_id": 1, //自增ID 
            "index_video": "", //视频
            "index_video_title": null, //视频标题
            "index_video_introduce": null//视频介绍
        }
    ]
}
//
admin/api/index_video//api地址

2，实现代码

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../js/ajax.js"></script><!-- .ajax所在的文件位置   -->
	<title>动态网页请求后台数据</title>
</head>
<body>
    <div id="2">
  	<!-- 此处内容见下面脚本语言的html的替换 -->
    </div>
</body>
<script type="text/javascript">
   $.ajax({
         url:'http://niumo.365hy.com/admin/api/index_video//api',         
         type:"POST",
         data:{},         
        success:function(res){
             console.log(res);
             var html='';
             for (var i = 0; i < res.data.length; i++) {
            // res.data[i]
                                           
    html+= '<div id="zhong1">'+
    '<video src="'+ res.data[i].index_video+'" controls="controls" poster="'+ res.data[0].index_video_image+'" height="168px;" width="300px;object-fit:cover"></video>'+
 '</div>'
      // controls是常用控件：如暂停，音量等；poster：开始的图片；height与width是播放器的宽与高（100%则表示原有大小展现）；object-fix是适应边框
            document.getElementById("2").innerHTML=html; // 获取或者替换掉html里面的内容
            }  
            } 
           })
</script>
</html>