【Flask项目】Ajax动态刷新 # 12

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

项目中常常用于下拉滚动条，实行动态获取网页数据，例如各类新闻平台等。

from . import blue_index
from flask import current_app, request, jsonify
from info.models import News, Category
from info.response_code import RET
from info import constants


@blue_index.route("/news_list", methods=["GET"])
def news_list():
    """
        新闻列表
        1.接收参数(cid, page, per_page)
        2.校验参数
            1.校验参数是否存在(cid)
            2.校验cid, page, per_page是否为整型
            3.校验cid在数据库中是否存在
        3.数据库查询数据
        4.返回Json
    :return:
    """
    # 1.接收参数
    cid = request.args.get("cid", 1)
    page = request.args.get("page", 1)
    per_page = request.args.get("per_page", constants.HOME_PAGE_MAX_NEWS)

    # 2.校验参数
        # 2.1校验参数是否存在(cid)
    if not cid:
        return jsonify(errno=RET.PARAMERR, errmsg="参数缺失")
        # 2.2校验cid, page, per_page是否为整型
    try:
        cid = int(cid)
        page = int(page)
        per_page = int(per_page)
    except Exception as e:
        current_app.logger.error(e)
        cid = 1
        page = 1
        per_page = 10
        # 2.3校验cid在数据库中是否存在
    try:
        category = Category.query.filter_by(id=cid).all()
    except Exception as e:
        current_app.logger.error(e)
        return jsonify(errno=RET.DBERR, errmsg="数据库查询失败")
    if not category:
        return jsonify(errno=RET.PARAMERR, errmsg="不存在该分类")
    # 3.数据库查询数据
    newsList = []
    try:
        if cid == 1:
            paginator = News.query.order_by(News.create_time.desc()).paginate(page=page, per_page=per_page)
        else:
            paginator = News.query.filter_by(category_id=cid).order_by(News.create_time.desc()).paginate(page=page,
                                                                                                          per_page=per_page)
    except Exception as e:
        current_app.logger.error(e)
        return jsonify(errno=RET.DBERR, errmsg="数据库查询失败")
    newsList = [news.to_basic_dict() for news in paginator.items]
    context = {
        "errno": RET.OK,
        "errmsg": "success",
        "cid": cid,
        "totalPage": paginator.pages,
        "currentPage": paginator.page,
        "newsList": newsList,
    }
    return jsonify(context)

    {# Ajax动态获取新闻数据 #}

var currentCid = 1; // 当前分类 id
var cur_page = 1; // 当前页
var total_page = 1;  // 总页数
var data_querying = true;   // 是否正在向后台获取数据:如果为ture表示正在加载数据；反之，没有加载数据


$(function () {

    // 当主页加载完成之后，立即刷新主页的分页数据
    // 默认加载第一页
    updateNewsData();

    // 首页分类切换
    $('.menu li').click(function () {
        var clickCid = $(this).attr('data-cid')
        $('.menu li').each(function () {
            $(this).removeClass('active')
        })
        $(this).addClass('active')

        if (clickCid != currentCid) {
            // 记录当前分类id
            currentCid = clickCid;

            // 重置分页参数
            cur_page = 1;
            total_page = 1;
            updateNewsData()
        }
    });

    //页面滚动加载相关
    $(window).scroll(function () {

        // 浏览器窗口高度
        var showHeight = $(window).height();

        // 整个网页的高度
        var pageHeight = $(document).height();

        // 页面可以滚动的距离
        var canScrollHeight = pageHeight - showHeight;

        // 页面滚动了多少,这个是随着页面滚动实时变化的
        var nowScroll = $(document).scrollTop();

        if ((canScrollHeight - nowScroll) < 100) {
            // TODO 判断页数，去更新新闻数据
            if (!data_querying) {
                // 表示正在加载数据
                data_querying = true;

                // 计算当前在第几页
                cur_page += 1;

                if (cur_page < total_page) {
                    // 加载指定页码的新闻数据
                    updateNewsData();
                }
            }
        }
    })
});

function updateNewsData() {
    // TODO 更新新闻数据
    var params = {
        'cid':currentCid,
        'page':cur_page
        // 每页多少条不用传，默认10条
    };

    $.get('/news_list', params, function (response) {
        // 得到响应后，表示一次加载数据结束了
        data_querying = false;

        if (response.errno == '0') {
            // 记录总页数
            total_page = response.totalPage;

            if (cur_page == 1) {
                $(".list_con").html("");
            }

            for (var i=0;i