從JSON讀取資料追加到HTML中

在写内容逻辑重复性的页面时，用json数据可以显著提高编程效率，并且便于后期的数据维护。因此，在视频专题页面，需要展示多列视频数据，我选择了用json。本文我们就和大家分享从JSON中读取数据追加到HTML中的方法，希望能帮助到大家。

HTML如下（只展示重点部分，需要引用JQ）

<p>
        </p><p>
            </p><p>
                </p><p>
                    热门视频
                </p>
                <p>
                </p>
            

JS如下

<script>
        $(document).ready(function(){
            
            console.log(1111)
            
                    $.getJSON(&#39;data.json&#39;,function(data){
                        
                        console.log(222)
                        
                        
                        
                    var mediahtml="";
                    
                    $.each(data,function(i,data) {
                        
                
                
                    mediahtml+=&#39;<p class="media">&#39;+
                    &#39;<p class="media-left">&#39;+
                    &#39;<a data-toggle="modal" data-target="#myModal">&#39;+
                    &#39;<img class="media-object lazy"  src="/static/imghwm/default1.png"  data-src="&#39;+data["   imgsrc"]+
                    &#39;" alt="">&#39;+
                        &#39;&#39;+&#39;&#39;+
                        &#39;<p class="media-body">&#39;+
                        &#39;<p class="title">&#39;+
                            &#39;<span class="classify">&#39;+
                                data["classify"]+
                            &#39;&#39;+
                            &#39;<span class="titlename media-heading">&#39;+
                                data[&#39;titlename&#39;]+
                            &#39;&#39;+
                        &#39;&#39;+
                        &#39;<span class="time">&#39;+
                            &#39;<span class="glyphicon glyphicon-time"> &#39;+
                            &#39;<span>&#39;+data[&#39;pubdate&#39;]+&#39;&#39;+
                        &#39;<p>&#39;+data["intro"]+&#39;&#39;+
                        &#39;<p class="guest">&#39;+
                            &#39;<span class="jia">嘉&#39;+
                            &#39;<span class="name">&#39;+data["name"]+&#39;&#39;+
                            &#39;<span class="position">&#39;+data["position"]+&#39;&#39;+
                            &#39;<span class="glyphicon glyphicon-eye-open">&#39;+
                            &#39;<span class="click-rite">&#39;+
                        &#39;&#39;+
                    &#39;&#39;+
                        
                    &#39;<p class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">&#39;+
                        &#39;<p class="modal-dialog" role="document">&#39;+
                            &#39;<p class="modal-content">&#39;+
                                &#39;<p class="modal-header">&#39;+
                                    &#39;<button type="button" class="close" data-dismiss="modal" aria-label="Close">&#39;+
                                        &#39;<span aria-hidden="true">&times;&#39;+
                                    &#39;&#39;+
                                &#39;&#39;+
                                &#39;<p class="modal-body">&#39;+
                        &#39;&#39;+
                    &#39;&#39;+
                    &#39;&#39;

                        
                        
                        
//                    var url_mobi=data.url_mobi;
//                    var url_pc=data.url_pc;
//                    if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i))) {
//                            $(&#39;.modal-body&#39;).prepend(url_mobi);
//                            }else{
//                            $(&#39;.modal-body&#39;).prepend(url_pc);
//                            }
//                            
//                            
                            })
                    
                    $(&#39;.medialist&#39;).after(mediahtml);    
                    
                    
                })
                    
                    
                })
                


                $(&#39;#myModal&#39;).on(&#39;shown.bs.modal&#39;, function (e) {
                    // 关键代码，如没将modal设置为 block，则$modala_dialog.height() 为零  
                    $(this).css(&#39;display&#39;, &#39;block&#39;);
                    var modalHeight = $(window).height() / 2 - $(&#39;#myModal .modal-dialog&#39;).height() / 2;
                    $(this).find(&#39;.modal-dialog&#39;).css({
                        &#39;margin-top&#39;: modalHeight
                    });
                });


                //点击预览图时判断
//                $(&#39;.modal&#39;).on(&#39;click&#39;, function () {
//                    if ($(&#39;#myModal&#39;).css("display") == "none") {
//                        $(&#39;.modal-body&#39;).children(&#39;iframe&#39;).attr(&#39;src&#39;, &#39;&#39;);
//                    } else {
//                        $(&#39;.modal-body&#39;).children(&#39;iframe&#39;).attr(&#39;src&#39;,
//                            &#39;https://v.qq.com/iframe/player.html?vid=v0508nqkm75&tiny=0&auto=0&#39;);
//                    }
//                })
        
    </script>

注释部分可不看，不影响内容。

首先要新建json文件，json文件需注意的问题是：json对数据格式有要求，不识别url中的各类符号，因此会提示错误，如果不修复，则会阻断JS进程，造成数据在页面不显示，这个问题我找了好久才发现，而且json问题在js中不会报错。解决办法是利用encode方法，格式化url，然后再添加进json即可，在html中应该还要用decode转回来。

第二个坑是插入html到某个标签中,有四个方法，用after就可以实现，不要用反了。

第三点是需要注意，不要在拼接字符串的时候忘掉加号，少一个就会出问题，一个小问题会找好久才发现，而且拼接错误JS不会报错，很难发现。

效果如下：

相关推荐：

jquery如何从json中读取数据追加到html中

js读取和解析JSON数据的方法

JS如何获取Json数组里数组长度的实例

以上是從JSON讀取資料追加到HTML中的詳細內容。更多資訊請關注PHP中文網其他相關文章！