这篇短文使用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. Tasks Queues and Cron Jobs(任务队列和时钟守护作业)

    一个网络应用必须迅速响应网络请求,一般要小于1s,最好是几十微秒,以便为坐在浏览器前面的用户提供一个流畅的体验.这就给不了应用太多的时间来处理工作.有时会是有更多的工作要做而不是有时间来做它.< ...

  2. 王家林 Spark公开课大讲坛第一期：Spark把云计算大数据速度提高100倍以上

    王家林 Spark公开课大讲坛第一期:Spark把云计算大数据速度提高100倍以上 http://edu.51cto.com/lesson/id-30815.html Spark实战高手之路 系列书籍 ...

  3. KVM背靠Linux好乘凉

    虚拟化是走向云的第一步,同理,开源虚拟化是走向开源云的第一步.云计算所提供的产品与方案都是围绕着IT资源的新交付与消费模式.云的形式多样,私有云.公有云与混合云,无论哪种云都具有三个关键特征:虚拟化. ...

  4. Node.js 数据库实时监控库 node-dbmon

    node-dbmon 是一个 Node.js 数据库实时监控库,如果你希望在数据库表数据更改后,或者是文件修改后能更新 GUI,那么这个库正好适合你. https://github.com/strap ...

  5. Adress

    流水账的写法:因为不想让亲爱的你只看开头就关掉了我辛苦的劳作.流水账的好处是:便于逻辑的理解 http://software.intel.com/zh-cn/blogs/2014/01/20/cent ...

  6. MySQL 大表优化方案探讨

    当MySQL单表记录数过大时,增删改查性能都会急剧下降,可以参考以下步骤来优化: 单表优化 除非单表数据未来会一直不断上涨,否则不要一开始就考虑拆分,拆分会带来逻辑.部署.运维的各种复杂度,一般以整型 ...

  7. jps用法

    jps(Java Virtual Machine Process Status Tool)是JDK 1.5提供的一个显示当前所有java进程pid的命令,简单实用,非常适合在linux/unix平台上 ...

  8. VC中监测函数运行时间（一）—分钟，秒，毫秒

    //myTimer.h // [10/16/2013 Duan Yihao] #pragma once #include "StdAfx.h" ////////////////// ...

  9. hdu3001 Travelling

    Travelling Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  10. ADO.NET 快速入门（三）：从存储过程获取输出参数

    一些存储过程通过参数返回值.当参数在SQL表达式或者存储过程中被定义为“输出”,参数值会返回给调用者.返回值存储在 OleDbCommand 或者 SqlCommand 对象的参数集合的参数里.   ...