这篇短文使用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. virt viewer Usbredir USB重定向

    编译virt viewer之前执行的configure命令,是没有使能usb-redir相关的功能,virt viewer是否支持usbredir是完全依赖于spice-gtk的. virt view ...

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

    今天好平凡啊. 晚上给徐斌打电话说忘带钥匙了,一块吃了个饭. 回到家,什么都不想做,好消沉. 玩了几局象棋,很多东西只是玩玩,但还是会认真,认真就会输,好惨. 最近在关注万科幸福里,可是.首付付不起啊 ...

  3. Mysql常见报错解决方法

    一:登录报错 ERROR 1045 (28000): Access denied for user 'mysql'@'localhost' (using password: NO) mysql日志文件 ...

  4. [C语言 - 3] 字符串

    字符数组 char * 看做一个特殊的字符数组, 在字符串结束为止添加'\0'结束符 (ASCII码0), 没有\0结尾的是普通的字符数组. 使用双引号定义的字符串自动在尾部加上\0 puts(s)函 ...

  5. 如何将std::string转int,double? (C/C++) (C) (template)

    http://www.cnblogs.com/oomusou/archive/2008/08/01/525647.html http://blog.sina.com.cn/s/blog_a843a88 ...

  6. 网络复习之TCP

    可靠传输的工作原理 1 停止等待协议 每发送完一个分组,就停止发送,等待对方确认.出现差错,超时重传.     1.1 暂时保留已发送的分组的副本     1.2 分组和确认分组必须进行编号     ...

  7. Volley使用指南第二回（来自developer.android）

    上一篇文章翻译了一下google的Volley官方文档,讲到了最基本的发送request.这一次我们来下一回:创建一个自定义RequestQueue. 这篇文章将会教你一步一步创建自己的Request ...

  8. IT职场生存法则

    转!!!!!!!!!!!!! 摘要我在IT职场打滚超过15年了,从小小的程序员做到常务副总.相对于其它行业,IT职场应该算比较光明的了,但也陷阱重重,本文说说我的亲身体会,希望大家能在IT职场上战无不 ...

  9. RT-Thread学习笔记（1）

    前几天我在看uCOS-II的东西,看来看去一直没什么头绪.还有一点是,我很介意它现在是个商业软件,在官网下载东西,半天下完结果只有个lib,没有源代码.只能去其他地方下载老版本. 我还很介意不是在官方 ...

  10. C++，C#，Python

    1.C++的思路:无论是基本类型,还是类类型,对象的传递提供了两种方式,一个是整体拷贝,一个是复制引用.整体拷贝对应着copy构造和copy赋值,复制引用就是通过引用或者指针实现的,当然指针本身还是整 ...