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>
这个地方使用了蓝图,在页面点击加载更多文章内容的按钮后,页面就会发送请求,具体见如下的截图信息:
欢迎关注微信公众号“Python自动化测试”