这篇短文使用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. 内核源码分析之软中断（基于3.16-rc4）

    1.和软中断相关的数据结构: softing_vec数组(kernel/softirq.c) static struct softirq_action softirq_vec[NR_SOFTIRQS] ...

  2. [iOS基础控件 - 6.9.2] 静态单元格 QQ功能列表

    使用storyboard设计静态的表格数据   A.实现步骤 1.控制器继承UITableViewController 2.在storyboard中使用TableViewController,删除原来 ...

  3. 从工程中删除Cocoapods

    从工程中删除Cocoapods 分类: Xcode iOS 2013-08-24 01:11 5512人阅读 评论(2) 收藏 举报 CocoapodsiOSXcode 1. 删除工程文件夹下的Pod ...

  4. C#中ArrayList和string,string[]数组的转换

    转载原地址: http://www.cnblogs.com/nextsoft/articles/2218689.html 1.ArrarList 转换为 string[] : ArrayList li ...

  5. Codeforces Round #362 (Div. 2) C. Lorenzo Von Matterhorn (类似LCA)

    题目链接:http://codeforces.com/problemset/problem/697/D 给你一个有规则的二叉树,大概有1e18个点. 有两种操作:1操作是将u到v上的路径加上w,2操作 ...

  6. POJ1189钉子和小球(DP)

    对钉子DP,如果钉子存在DP[i+1][j]+=DP[i][j]; DP[i+1][j+1]+=DP[i][j]; 如果不存在DP[i+2][j+1]+=4*DP[i][j]; 见代码:(有一个比较坑 ...

  7. OOP 6大基本原则

    1.开闭原则: 对扩展开发.对修改关闭. 2.里氏替换原则:子类替换父类(可以用父类对象的任何地方都可以用子类对象代替) 3.依赖倒置原则:程序要依赖于抽象接口,不要依赖于具体实现.简单的说就是要求对 ...

  8. FPGA高级设计——时序分析和收敛（转）

    何谓静态时序分析(Static Timing Analysis,简称STA)? 它可以简单的定义为:设计者提出一些特定的时序要求(或者说是添加特定的时序约束),套用特定的时序模型,针对特定的电路进行分 ...

  9. Spring @RequestHeader用法

    Spring MVC提供了 @RequestHeader注解,能够将请求头中的变量值映射到控制器的参数中.下面是一个简单的例子: import org.springframework.stereoty ...

  10. ASP获取json天气信息

    ASP代码(ASP获取页面源码方法,有编码.超时时间参数,处理了乱码.超时的问题): Function GetHttpPage(HttpUrl) Then GetHttpPage="$Fal ...