Flask之ajax的请求

在页面的交互中，程序的操作基本都是客户端发送请求后，服务的响应返回给客户端数据，客户端通过浏览器的渲染技术

展示出来，这样的一个模式被称为请求响应的模式。在页面交互中，这样的请求存在是很频繁的，比如提交一个请求，加载

显示出数据。特别是记载显示，客户端发送请求后，当服务端返回响应时，整个页面都会加载并且渲染。这样的方式在某些程度

上它是没有什么问题的，但是频繁的操作，等于每次页面加载渲染，如果页面的资源特别多的时候，就会存在性能的问题。假设

点击一个加载按钮，显示出100张图片，本身100张图片就需要浪费客户端的资源，再加上页面本身已有的图片，就会导致页面

加载更加延迟，这样就等于牺牲用户体验作为代价。那么这对这样的问题，可以使用ajax的技术来解决这样的问题。在本文章

中，主要介绍使用jquery来发送ajax的请求。具体还是看一个实际的案例，打开一个页面，点击加载更多的时候，返回一些数据，

实现的源码具体如下：

#!/usr/bin/python3
#coding:utf-8

from flask import  Flask,Blueprint,jsonify,request,redirect,url_for,make_response,session,abort,g,render_template
import  json
from jinja2.utils import generate_lorem_ipsum
from celery import  Celery
from apps.api.forms import RegisterForm

bp=Blueprint('api',__name__,url_prefix='/api')

@bp.route('/douban')
def douBan():
    return render_template('api/douBan.html')

@bp.route('/content')
def content():
    return generate_lorem_ipsum(n=10)


douBan.html的源码内容为：
<html>
    <head>
        <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function ()
            {
                $('#movies').click(function ()
                {
                    $.ajax({
                        'url':'/api/content',
                        'type':'get',
                        success:function (data)
                        {
                            /*返回的内容显示在页面上*/
                            $(".content").append(data)
                        }
                    })
                })
            });
        </script>
    </head>
    <body>
        <button id="movies">加载更多文章内容</button>
        <div class="content"></div>
    </body>
</html>


这个地方使用了蓝图，在页面点击加载更多文章内容的按钮后，页面就会发送请求，具体见如下的截图信息：

 

 





posted @ 2020-04-12 22:05  ~狼哥~  阅读(1008)  评论(0)    收藏  举报