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 ...
随机推荐
- <Chapter 2>2-1-1.安装Python SDK
App Engine包含两个Python运行时环境:一个基于Python2.5的传统环境,以及一个运行Python2.7的新环境.这个新环境不仅仅是有一个轻微的新版本的Python解释器.主要是,这个 ...
- 在已创建的DataTable对象中添加在首列一列
问题描述: 从数据库读取出来的表数据赋给到了DataTable上,将DataTable中数据显示到DataGridView中时希望在DataGridView的第一列显示一列. 解决方法: DataTa ...
- 一个考察for循环题 讨论一下
一道Java程序题,主要是考察for循环如下所示: public class Test { static boolean fun(char c) { System.out.print(c); retu ...
- Apache Spark MLlib的简介
MLlib 是构建在 Spark 上的分布式机器学习库,充分利用了 Spark 的内存计算和适合迭代型计算的优势,将性能大幅度提升.同时由于 Spark 算子丰富的表现力, 让大规模机器学习的算法开发 ...
- Java集合之ArrayList和LinkedList的实现原理以及Iterator详解
ArrayList实现可变数组的原理: 当元素超出数组内容,会产生一个新数组,将原来数组的数据复制到新数组中,再将新的元素添加到新数组中. ArrayList:是按照原数组的50%来延长,构造一个初始 ...
- Spring EL method invocation example
In Spring EL, you can reference a bean, and nested properties using a 'dot (.)' symbol. For example, ...
- ASP.NET项目中引用全局dll
在ASP.NET项目中,有些dll是全局dll,也就是说,没有放在单个项目的引用中.它们一般存放在如下目录C:\Windows\assembly中 这个时候,我们需要在单个项目中引用他们,应该如何做呢 ...
- POJ 3673 Cow Multiplication (水题)
题意:给你两个数,求所有的数位的积的和. 析:太水了,没的说,可以先输入边算,也可以最后再算,一样.. 代码如下: #include <cstdio> #include <strin ...
- Random的nextInt用法
因为想当然的认为Random类中nextInt()(注:不带参数),会产生伪随机的正整数,采用如下的方式生成0~99之间的随机数: Random random = new Random(); rand ...
- Linux - CentOS 6.3 (x86_64)安装过程详细图解
I:下载CentOS 6.3 楼主已经从CentOS官方公布下载列表当中整理出了2个在国内的下载地址,这样就不需要为访问墙外的龟速网络而费心了. 32位:下载地址1,下载地址2 64位:下载地址1,下 ...