Read data from JSON and append to HTML

When writing pages with logical and repetitive content, using json data can significantly improve programming efficiency and facilitate later data maintenance. Therefore, on the video topic page, multiple columns of video data need to be displayed, and I chose to use json. In this article, we will share with you the method of reading data from JSON and appending it to HTML. We hope it can help you.

HTML is as follows(Only the key parts are shown, JQ needs to be quoted)

<p class="container-fluid content ">
        <p class="container neirong">
            <p class="left fl">
                <p class="title">
                    热门视频
                </p>
                <p class="medialist">
                </p>
            </p></p>
</p>

JS is as follows

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

                        
                        
                        
//                    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))) {
//                            $('.modal-body').prepend(url_mobi);
//                            }else{
//                            $('.modal-body').prepend(url_pc);
//                            }
//                            
//                            
                            })
                    
                    $('.medialist').after(mediahtml);    
                    
                    
                })
                    
                    
                })
                


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


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

You can ignore the comments , does not affect the content.

First, create a new json file. The problem that you need to pay attention to with json files is that json has requirements for data format and does not recognize various symbols in the url, so an error will be prompted. If it is not repaired, JS will be blocked. process, causing the data not to be displayed on the page. It took me a long time to find this problem, and the json problem will not report an error in js. The solution is to use the encode method to format the url and then add it to json. You should also use decode to convert it back in html.

The second pitfall is to insert html into a certain tag. There are four methods. You can use after to achieve this. Don't use it the other way around.

The third point is that you need to pay attention. Don’t forget the plus sign when splicing strings. One missing one will cause problems. It will take a long time to find a small problem, and JS will not report an error when splicing errors. It is very difficult. Discover.

The effect is as follows:

Related recommendations:

How about jquery Read data from json and append it to html

JS method of reading and parsing JSON data

How does JS get Json Example of array length in array

The above is the detailed content of Read data from JSON and append to HTML. For more information, please follow other related articles on the PHP Chinese website!