Lire les données depuis JSON et les ajouter au HTML

Lors de l'écriture de pages avec un contenu et une logique répétitifs, l'utilisation de données json peut améliorer considérablement l'efficacité de la programmation et faciliter la maintenance ultérieure des données. Par conséquent, sur la page du sujet vidéo, plusieurs colonnes de données vidéo doivent être affichées et j'ai choisi d'utiliser json. Dans cet article, nous partagerons avec vous la méthode de lecture des données JSON et de leur ajout au HTML. Nous espérons que cela pourra vous aider.

Le HTML est le suivant (seules les parties clés sont affichées, JQ doit être cité)

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

Le JS est le suivant

<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>

Vous n'êtes pas obligé de lire la partie annotation, cela n'affectera pas le contenu.

Tout d'abord, créez un nouveau fichier json. Le problème auquel vous devez faire attention avec les fichiers json est que json a des exigences en matière de format de données et ne reconnaît pas divers symboles dans l'URL, donc une erreur sera générée. S'il n'est pas réparé, le processus JS sera bloqué, ce qui empêchera les données de s'afficher sur la page. Il m'a fallu beaucoup de temps pour trouver ce problème, et le problème json ne signalera pas d'erreur dans js. La solution consiste à utiliser la méthode encode pour formater l'URL, puis à l'ajouter à json. Vous devez également utiliser decode pour la reconvertir en HTML.

Le deuxième piège est d'insérer du HTML dans une certaine balise. Vous pouvez utiliser after pour le faire. Ne l'utilisez pas dans l'autre sens.

Le troisième point est que vous devez faire attention. N'oubliez pas le signe plus lors de l'épissage des cordes. S'il en manque un, il faudra beaucoup de temps pour trouver un petit problème. De plus, JS ne signalera pas d'erreur lors des erreurs d'épissage. C'est très difficile à découvrir.

L'effet est le suivant :

Recommandations associées :

Que diriez-vous de jquery Lire les données de json et les ajouter au HTML

Méthode JS de lecture et d'analyse des données JSON

Comment obtenir Json avec JS Exemple de longueur de tableau dans un tableau

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!