Flask与Ajax
这篇短文使用jquery。
Flask提供一个很简单的方法来处理Ajax请求——在视图函数中用request的属性is_xhr来判断,如果是true则是异步请求。
Jquery的$.getJSON()方法会主动向服务端发出ajax请求(不知这个理解是否正确?),服务端响应后调用$.getJSON的回调函数。在回调函数中就可以操作Html页面上的元素了。
客户端:ajax.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Document</title>
<link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<h1>Ajax</h1>
<div id="test">Show data count:</div>
<script src="//cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$.getJSON('/ajax',function(data){
$('#test').append('<span class="badge">'+data.count+'</span>');
});
});
</script>
</body>
</html>
服务端:
@app.route('/ajax')
def y():
if request.is_xhr:
y = Area.query.all()
return jsonify({'count':len(y)})
return render_template('ajax.html')
--End--
Flask与Ajax的更多相关文章
- 教你如何使用flask实现ajax数据入库
摘要:在正式编写前需要了解一下如何在 python 函数中去判断,一个请求是 get 还是 post. 本文分享自华为云社区<[首发]flask 实现ajax 数据入库,并掌握文件上传>, ...
- Flask jQuery ajax
http://www.runoob.com/jquery/jquery-ref-ajax.html http://jun1986.iteye.com/blog/1399242 下面是jQuery官方给 ...
- flask jQuery ajax 上传文件
1.html 代码 <div> <form id="uploadForm" enctype="multipart/form-data" > ...
- flask使用ajax提交表单
Flask中使用ajax提交表单刷新数据,避免提交表单后使用return render_temp()会刷新页面 <form id ="test_form"> {{ fo ...
- flask使用ajax上传图片或者文件
function upload_cover(){ var cover = new FormData(); var fileObj = document.getElementById('cover'). ...
- 网易新闻实战 --- flask,ORM, Ajax异步删除
项目概述: 包含功能: 前端-- 新闻首页 新闻分类页 新闻详情页 后端-- 后台新闻管理(列表,分页) 新增新闻 修改新闻 删除新闻(AJAX)
- jquery+flask+keras+nsfw快速搭建一个简易鉴黄工具
1. demo 地址:http://www.huchengchun.com:8127/porn_classification 接口说明: 1. http://www.huchengchun.com:8 ...
- flask学习导航主页
我就学习了网易课堂的知了Flaskk. 十分感谢. └—01-Flask视图和URL ├—课时001.[Flask预热]课程介绍 ├—课时002.[Flask预热]Flask课程准备工作 ├—课时00 ...
- Django---手动编写视图
手动编写视图 一. Request----->URL---->业务处理(Views)(Http Response) Response-------> 二. VOE Django ...
随机推荐
- 《Genesis-3D开源游戏引擎完整实例教程-2D射击游戏篇:简介及目录》(附上完整工程文件)
G-3D引擎2D射击类游戏制作教程 游戏类型: 打飞机游戏属于射击类游戏中的一种,可以划分为卷轴射击类游戏. 视觉表现类型为:2D 框架简介: Genesis-3D引擎不仅为开发者提供一个3D游戏制作 ...
- Intellij IDEA Maven创建web项目
Intellij IDEA在创建java webapp的时候没有那么人性化,新手使用会处处碰壁.特此记录! 一.File--New--project 二.Next--输入GroupId.Artifac ...
- dfs.datanode.max.xcievers参数导致hbase集群报错
2013/08/09 转发自http://bkeep.blog.163.com/blog/static/123414290201272644422987/ [案例]dfs.datanode.max.x ...
- TJOI2013 DAY2
第一题:明显先处理出最终序列,然后用线段树求解.处理最终序列可以用二分加树状数组(时间复杂度log2n, 用平衡树也可以搞...). /* * Problem: TJOI2013-day2-Seque ...
- Emacs Lisp 功能扩展集锦
http://docs.huihoo.com/homepage/shredderyin/emacs_elisp.html Emacs 具有超强的扩展性.这是当今没有任何其它编辑器可以比拟 的强大特点. ...
- CodeForces 682C Alyona and the Tree (树+dfs)
Alyona and the Tree 题目链接: http://acm.hust.edu.cn/vjudge/contest/121333#problem/C Description Alyona ...
- Python多线程学习资料1
一.Python中的线程使用: Python中使用线程有两种方式:函数或者用类来包装线程对象. 1. 函数式:调用thread模块中的start_new_thread()函数来产生新线程.如下例: ...
- Spring Data JPA 教程(翻译)
写那些数据挖掘之类的博文 写的比较累了,现在翻译一下关于spring data jpa的文章,觉得轻松多了. 翻译正文: 你有木有注意到,使用Java持久化的API的数据访问代码包含了很多不必要的模式 ...
- NGUI学习笔记(五):缓动
在Unity3D中可以使用自带的Animation制作任意形式的动画,不过我们这篇笔记主要是学习和使用NGUI提供的Tween动画.NGUI提供的Tween库功能较为简单,主要是用来实现NGUI自身需 ...
- [Windows驱动开发](二)基础知识——数据结构
本节主要介绍驱动开发的一些基础知识. 1. 驱动程序的基本组成 1.1. 最经常见到的数据结构 a. DRIVER_OBJECT驱动对象 // WDK中对驱动对象的定义 // 每个驱动程序都会有一个唯 ...