这篇短文使用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的更多相关文章

  1. 教你如何使用flask实现ajax数据入库

    摘要:在正式编写前需要了解一下如何在 python 函数中去判断,一个请求是 get 还是 post. 本文分享自华为云社区<[首发]flask 实现ajax 数据入库,并掌握文件上传>, ...

  2. Flask jQuery ajax

    http://www.runoob.com/jquery/jquery-ref-ajax.html http://jun1986.iteye.com/blog/1399242 下面是jQuery官方给 ...

  3. flask jQuery ajax 上传文件

    1.html 代码 <div> <form id="uploadForm" enctype="multipart/form-data" > ...

  4. flask使用ajax提交表单

    Flask中使用ajax提交表单刷新数据,避免提交表单后使用return render_temp()会刷新页面 <form id ="test_form"> {{ fo ...

  5. flask使用ajax上传图片或者文件

    function upload_cover(){ var cover = new FormData(); var fileObj = document.getElementById('cover'). ...

  6. 网易新闻实战 --- flask,ORM, Ajax异步删除

    项目概述: 包含功能: 前端-- 新闻首页 新闻分类页 新闻详情页 后端-- 后台新闻管理(列表,分页) 新增新闻 修改新闻 删除新闻(AJAX)

  7. jquery+flask+keras+nsfw快速搭建一个简易鉴黄工具

    1. demo 地址:http://www.huchengchun.com:8127/porn_classification 接口说明: 1. http://www.huchengchun.com:8 ...

  8. flask学习导航主页

    我就学习了网易课堂的知了Flaskk. 十分感谢. └—01-Flask视图和URL ├—课时001.[Flask预热]课程介绍 ├—课时002.[Flask预热]Flask课程准备工作 ├—课时00 ...

  9. Django---手动编写视图

    手动编写视图 一. Request----->URL---->业务处理(Views)(Http Response) Response-------> 二. VOE    Django ...

随机推荐

  1. OpenStack Cinder组件支持的块存储设备表

    摘自恒天云官网:http://www.hengtianyun.com/download-show-id-18.html OpenStack的Cinder组件底层可以连接多种存储设备和方案,每一个Ope ...

  2. elisp语法

    http://stackoverflow.com/questions/3855862/setq-and-defvar-in-lisp defvar, let, setq的语法分析: defvar in ...

  3. 第二百五十八天 how can I 坚持

    装虚拟机了.CentOs,32位,这电脑装4台能不能带起来啊. 早上,流鼻血了,不知道咋回事.太干了... 明天得早起会,得利索着点,不能托托拉拉的. 还有,今天又忘带钥匙了.悲剧. 睡觉.hadoo ...

  4. 转】机器学习开源框架Mahout配置与入门研究

    原博文出自于:http://www.ha97.com/5803.html    感谢! PS:机器学习这两年特别火,ATB使劲开百万到几百万年薪招美国牛校的机器学习方向博士,作为一个技术控,也得折腾下 ...

  5. 现代C++作业2 与 围棋homework-06

    本文第一部分是现代C++作业2,第二部分是对围棋程序的部分建议,还有一些修改和优化体现在Github里面的代码中. 首先是现代C++作业. 1. 了解Lambda的用法.计算“Hello World! ...

  6. 黄金点游戏之客户端(homework-05)

    0. 摘要 之前我们玩了2次黄金数游戏,我也幸运的得到了一本<代码大全>,嘿嘿.这次的作业是一个Client/Server程序,自动化完成多轮重复游戏. 我完成了Client部分,使用C# ...

  7. CodeForces 567A Gerald is into Art

    http://codeforces.com/problemset/problem/567/A A. Lineland Mail time limit per test 3 seconds memory ...

  8. hdu 4781 Assignment For Princess (2013ACMICPC 成都站 A)

    http://acm.hdu.edu.cn/showproblem.php?pid=4781 由于题目太长,这里就不直接贴了,直接说大意吧. 题目大意:有一个n个点,m条边的有向图,每条边的权值分别为 ...

  9. Hadoop 2.0+YARN启动脚本分析与实战经验

    start-all.sh脚本现在已经废弃,推荐使用start-dfs.sh和start-yarn.sh分别启动HDFS和YARN. 在新一代的Hadoop里面HDFS称为了统一存储的平台,而YARN成 ...

  10. 【转】Android真机抓屏- Android Screen Monitor

    http://www.cnblogs.com/xiaofeixiang/p/4086092.html 一般运行Android应用程序有两种方式一种是设置Android虚拟设备模拟器,通过Android ...