Flask 分页 验证码图片 Ajax调用

带有注释的数据库脚本，大家对对：https://github.com/LiuJunjie0619/NewInfor/blob/master/database.py

javascript基础语法
https://www.cnblogs.com/huangshikun/p/6565374.html

static
<script type="text/javascript" src="../../static/news/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../static/news/js/main.js"></script>

分页：HTML

<script>
$(function() {
$("#pagination").pagination({ #内置方法
currentPage: {{ data.current_page }}, #当前页
totalPage: {{ data.total_page }}, #总页数
callback: function(current) { #回到函数
window.location.href = "/category/"+{{data.category_id}}+"?p="+current
} #url传参
});
});
</script>

py文件：

current_page=request.args.get('p',1,type=int)
per_page=2
data = {}
data['categories'] = Category.query.all()

# 分页查询，商品信息
good_list=Goods.query.filter(Goods.category_id==id).paginate(current_page,per_page,False)
data['goods'] = good_list.items
data['current_page']=good_list.page #当前页
data['total_page']=good_list.pages #总页数
data['category_id']=id

验证码 captcha
导包
from utils.captcha.captcha import captcha #验证码

#验证码
@app.route('/get_image',methods=['GET','POST'])
def get_image():
# name,text,StringIO.value （图片信息）
# text:验证码图片对应到文本
# image_url 验证码图片IO流。理解：二进制数据，并没有实际转换成图片
name, text, image_url = captcha.generate_captcha()
session['img_code'] = text #不能重名
# 生成图片到响应
response = make_response(image_url)
# 告诉浏览器 我要返回的是一张图片
response.headers['Content-Type'] = 'image/jpg'
return response

验证码图片：
var imageCodeId = ""
var preimageCodeId = ""
// TODO 生成一个图片验证码的编号，并设置页面中图片验证码img标签的src属性
function generateImageCode() {

//生成一个随机字符串uuid
imageCodeId = generateUUID()

//拼接请求路径,和一个字符串没有什么两样
image_url = "/user/get_image?cur_id="+imageCodeId + "&pre_id="+preimageCodeId

//将image_Url设置到img标签中src, IMG标签只要设置了里面的src属性,会自动去请求跟上的地址
$(".get_pic_code").attr("src",image_url)

// 记录上一次的uuid
preimageCodeId = imageCodeId
}

function generateUUID() {
var d = new Date().getTime();
if(window.performance && typeof window.performance.now === "function"){
d += performance.now(); //use high-precision timer if available
}
var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = (d + Math.random()*16)%16 | 0;
d = Math.floor(d/16);
return (c=='x' ? r : (r&0x3|0x8)).toString(16);
});
return uuid;
}

Ajax调用

<script type="text/javascript">
$('#perPage').blur(function () {
var perPage = $('#perPage').val()
var params ={'perPage':perPage}
$.ajax({
url:'/',
type:'POST',
data:params,
dataType:'json',
success:function(res){
console.log(res)
if(res.code == 200){
console.log('200')
location.reload();
}else{
// $error.html(res.message).show();
}
}

})
})
</script>