这篇短文使用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. POJ-1002 解题报告

      1.题目描述 http://poj.org/problem?id=1002 2.解题过程 按部就班来解题的话,这个题目很容易写出来,这是我的第一个版本的代码,思路是读入一行电话字符串,均转化为整型 ...

  2. 解决问题的步骤（第一篇）-- clwu

    现象: 之前打开IE 还是正常的,但前几天开始打开就不正常了,报错如下. 处理(别人的)问题的步骤: 百度一下  0xc0000018,没有什么有用信息. 看一下程序(IE)启动时做了些什么. 怎么看 ...

  3. 实现 Web 后端和客户端之间的分布式和认证通讯

    stack.io 是一个用于实现 Web 后端和客户端之间的分布式和认证通讯. 服务器端进程之间的通讯是非常高效的,因为没有中间的代理.而来自客户端的请求通过 socket.io 进入 Node.js ...

  4. 第二百五十九天 how can I 坚持

    晚上,弟弟给我说了下他前几天发生的事,这孩子,有事就不知道说下,自己闷在心里. 刘松打算最近买房了,弟弟和建哥也考虑买,让他俩商量着来吧,早晚都得买. 有点揪心.想结婚不知道该和谁结... 睡觉.烦.

  5. 软件工程 --- Pair Project: Elevator Scheduler [电梯调度算法的实现和测试] [附加题]

    软件工程 --- Pair Project: Elevator Scheduler [电梯调度算法的实现和测试] [附加题] 首先,在分组之前,我和室友薛亚杰已经详细阅读了往届学长的博客,认为电梯调度 ...

  6. http://www.hameister.org/JavaFX_PuzzleGame.html

    http://www.hameister.org/JavaFX_PuzzleGame.html

  7. maven系列（2）-第一个maven的项目

    上一篇简单了介绍了maven和maven的安装,这篇介绍如何用maven创建项目. 1. 命令行创建maven项目 maven创建项目很简单,直接调用mvn archetype:generate命令即 ...

  8. STC89c52RC 的EEPROM和AVR的EEPROM

    二者的EEPROM不是一回事,AVR片内的EEPROM是独立于程序存储器的数据存储器,本身不能存储程序并运行,但现代MCU很多支持IAP,利用IAP技术可在程序存储空间实现数据存储即替代EEPROM, ...

  9. jquery easyui中的dialog拖动超出浏览器问题解决办法

    juqery easyui当鼠标点着拖动超出浏览器后,就回不来了,拉不下的问题: //控制dialog超出浏览器回到原来的地方 var default_left; var default_top;// ...

  10. [C语言 - 7] 结构体struct

    A. 基本知识   与数组的对比 数组: 构造类型 只能有多个相同类型的数据构成   结构体: 结构体类型 可以由多个不同类型的数据构成   1. 定义类型 struct Student { int ...