javascript - 如何将 ajax 响应显示到 bootstrap 模式中

Question

我想弹出一个模式，显示来自查询的动态数据。因此，当用户单击相关学校时，相关学校将显示在模式中。我收到了回复，但我不知道如何显示该模式。有什么建议吗？

按钮:

 <a href="#." data-toggle="modal" data-target="#myModal" data-id="{{$user->id}}"  class="chooseSchoolBtn">Choose School</a>

Ajax :

$(".chooseSchoolBtn").on("click", function (argument) {
    //console.log($(this).data("id"))
    var user_id = $(this).data("id")
    var info = $.get("{{url('school-list')}}", {
        id: user_id
    });
    info.done(function (data) {
        console.log(data)
    });
});

模态:

<div class="modal-body">
    // This section will come dynamically
    <div class="col-md-2 col-sm-4 col-xs-12">
        <div class="single_school">
            <div class="selection_area">
                <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
            </div>
            <div class="school_img_area" style="background-image: url(school/images/school/school1.jpg);">
            </div>
            <div class="school_info">
                <p class="school_name">School Name</p>
                <p class="school_description">Good School...</p>
                <p class="school_price">12$</p>
            </div>
        </div>
    </div>
    // dynamic section ends
</div>

json 响应:

{
    id: 1,
    user_id: 2,
    price: "2340.00",
    name: "XYZ",
    display_image: "1510570005ajaPXajmik.png"
}, {
    id: 3,
    user_id: 2,
    price: "123.00",
    name: "ABC",
    display_image: "1510570049QZWiQUh7zY.jpg"
}

Answer 1

只需更改ajax响应数据

info.done(function(data){          
    $.each(data,function(index,value){
        $(".school_img_area").attr("style","background-image: url(school/images/school/"+value.display_image+");");
        $(".school_name").html(value.name);
        $(".school_price").html(value.price);
    });
});

快乐编码:-)