ajax_list.html

{% extends "base.html" %}
{% block script %}
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    function get_data(page){
        $.ajax({
            type: "get",
            url: "/ss/api2",
            data: {
                page: page
            },
            success: function(response) {
                // ajax 请求成功
                render_data(response);
                // 修改分页数据
                $('.prev').attr('page',response["prev_page"]);
                $('.next').attr('page',response["next_page"]) ;
                console.log("AJAX request succeeded!");
            },
            error: function(error) {
                console.log("AJAX request failed: " + error);
            }
         });
    }

    function render_data(response){
            data_list = response["data_list"];
            if(data_list.length>0){
                $('#school_list').empty();
                $.each(data_list,function(index,item){

                    var row = $('<div>', {
                      'class': 'row mt-3',
                      'data-custom-attribute': 'value'
                    });
                    var col =$('<div>', {
                      'class': 'col'
                    });
                    var d_flex = $('<div>', {
                      'class': 'd-flex'
                    });
                    d_flex.append('<div class="flex-shrink-0"><a href="#"><img class="rounded-pill img-thumbnail" width="64" height="64" src="'+item.pic+'" alt=""></a></div>');
                    // 生成一下标签代码
                    var badge = "";
                    $.each(item.feature.split(','),function(i,f){
                       badge += ' <span class="badge rounded-pill bg-primary">'+f+'</span> ';
                    });

                    d_flex.append('<div class="flex-grow-1 ms-3"><h5 class="float-start pe-3">'+item.name+'</h5><p class="ms-3">'+badge+'</p><p><em>所在省市：<span class="text-black-50">'+item.province+'--'+item.city+'</span></em></p></div>')

                    col.append(d_flex);
                    row.append(col);
                    $('#school_list').append(row);
                })
            }
    }

    $(function(){
        $('.page-item').on('click',function(){
            page = $(this).attr('page');
            // 获取数据
            get_data(page);
        })
    })
</script>
{% endblock script %}


{% block content %}
<div class="container" id="school_list">

    {% for school in pagination.data_list %}
    <div class="row mt-3">
        <div class="col">
            <div class="d-flex">
                <div class="flex-shrink-0">
                    <a href="#">
                        <img class="rounded-pill img-thumbnail" width="64" height="64" src="{{school.pic}}" alt="">
                    </a>
                </div>
                <div class="flex-grow-1 ms-3">
                    <h5 class="float-start pe-3">{{school.name}}</h5>
                    <p class="ms-3">
                        {% for fea in school.feature.split(',') %}
                        <span class="badge rounded-pill bg-primary">{{fea}}</span>
                        {% endfor %}
                    </p>
                    <p><em>所在省市：<span class="text-black-50">{{school.province}} -- {{school.city}}</span></em></p>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}

</div>
<div class="container">
    <div class="row">
        <div class="col">
            <span class="text-dark float-end align-middle"
                  style="line-height: 40px;">合计  {{pagination.total}} 条数据</span>
            <ul class="pagination float-end">
                <li class="page-item prev" page="{{pagination.prev_page}}">
                    <a class="page-link" href="#">上一页</a>
                </li>
                <li class="page-item next" page="{{ pagination.next_page }}"><a class="page-link"
                                                                                href="#">下一页</a>
                </li>
            </ul>
        </div>
    </div>
</div>

{% endblock %}