Question

您好我是从json和php开始的，我有一个问题，我从json

编码php

    [{
    "profesional_id": "76317897",
    "profesional_profesion": "Teacher",
    "profesional_foto": "sdwsgted.jpg",
    "profesional_nombre": "Michael",
    "profesional_apellidos": "Tyler",
    "profesional_calificacion": "5"
}, {
    "profesional_id": "34328602",
    "profesional_profesion": "Doctor",
    "profesional_foto": "jsjdfls.jpg",
    "profesional_nombre": "Allison",
    "profesional_apellidos": "Adney",
    "profesional_calificacion": "5"
}]

我正在尝试制作像这样的东西

See sample imagen

我发现这个，表格格式还可以

$(document).ready(function(){
    var url="../ajax/profesional.php?op=listar";
    $("#tablajson tbody").html("");
    $.getJSON(url,function(profesionales){
        $.each(profesionales, function(i,profesional){
            var newRow =
                "<tr>"
                +"<td>"+profesional.profesional_id+"</td>"
                +"<td>"+profesional.profesional_profesion+"</td>"
                +"<td>"+profesional.profesional_foto+"</td>"
                +"<td>"+profesional.profesional_nombre+"</td>"
                +"<td>"+profesional.profesional_apellidos+"</td>"
                +"<td>"+profesional.profesional_calificacion+"</td>"
                +"</tr>";
            $(newRow).appendTo("#tablajson tbody");
        });
    });
});

这样的东西是我需要的格式

<div class="col-md-6 col-lg-4">
    <div class="card team__item">
        <img src="demo/img/contacts/profesional_foto" class="team__img" alt="">

        <div class="card-body">
            <h4 class="card-title">profesional_nombre profesional_apellido</h4>
            <h6 class="card-subtitle">profesional_profesion</h6>


            <p class="card-text">profesional_another info</p>

            <div class="rating-demo">
                <div class="rating" data-rateyo-star-width="20px" data-rating="profesional_calificacion"></div>
            </div>

            <BR>

            <button class="btn btn-outline-warning" data-toggle="modal" data-target="#modal-backdrop-ignore">Solicitar cita</button>
        </div>
    </div>
</div>

我怎么能这样做，几乎我找到的所有信息都使用表格。

非常感谢

Answer 1

我尝试chage to divs和works，现在我怎么能在我的页面中显示它？需要一些变量？和一个div（ $（＆＃34;＃tablajson＆＃34;）。html（＆＃34;＆＃34;）; 不起作用）和一个像例子：

        $(document).ready(function(){
        var url="generarJSON.php";
        **$("#tablajson tbody").html(""); 
        $.getJSON(url,function(clientes){
        $.each(clientes, function(i,cliente){
        **var newRow = <----------**
         .
         .
         .
        **$(newRow).appendTo("#tablajson tbody"); <----------**
        });
        });
        });

这是我的代码

功能列表（） {

        $(document).ready(function(){
        var url="../ajax/profesional.php?op=listar";
        $("#tablajson").html("");<----------** 
        $.getJSON(url,function(profesionales){
        $.each(profesionales, function(i,profesional){

        console.log(i + ':' + profesional.profesional_id);
        console.log(i + ':' + profesional.profesional_profesion);           

        "<div class='col-md-6 col-lg-4'>"
                        "<div class='card team__item'>"
                            "<img src='../public/img/terapeutas/1.jpg' class='team__img' alt=''>"

                            "<div class='card-body'>"
                                "<h4 class='card-title'>profesional_nombre profesional_apellido</h4>"
                                "<h6 class='card-subtitle'>"+profesional.profesional_profesion+"</h6>"


                                "<p class='card-text'>Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vivamus sagittis lacus vel augue.</p>"

                                "<div class='rating-demo'>"
                                    "<div class='rating' data-rateyo-star-width='20px' data-rating='5'></div>"
                                "</div>"                                    

                                "<BR>"

                                    "<button class='btn btn-outline-warning' data-toggle='modal' data-target='#modal-backdrop-ignore'>Solicitar cita</button>"


                                            "<div class='modal fade' id='modal-backdrop-ignore' data-backdrop='static' tabindex='-1'>"
                                                "<div class='modal-dialog'>"
                                                    "<div class='modal-content'>"
                                                        "<div class='modal-header'>"
                                                            "<h5 class='modal-title pull-left'>Default modal</h5>"
                                                        "</div>"
                                                        "<div class='modal-body'>"
                                                            "Curabitur blandit mollis lacus. Nulla sit amet est. Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Cras sagittis."
                                                        "</div>"
                                                        "<div class='modal-footer'>"
                                                            "<button type='button' class='btn btn-link'>Save changes</button>"
                                                            "<button type='button' class='btn btn-link' data-dismiss='modal'>Close</button>"
                                                        "</div>"
                                                    "</div>"
                                                "</div>"
                                            "</div> "   

                            "</div>"
                        "</div>"
                    "</div>"


        });
        });
        });

}

从url参数格式化json信息

1 个答案: