Flask与Ajax

  这篇短文使用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--

时间: 2024-10-11 07:23:36

Flask与Ajax的相关文章

flask jQuery ajax 上传文件

1.html 代码 <div> <form id="uploadForm" enctype="multipart/form-data" > <div> <input type="file" name="file" value="" style="color: white"> <input type="button"

flask后端+ajax前端,解决跨域资源引起CORB问题

在 Javascript 中跨域访问是比较常见的事情,这次记录使用flask写后端API,前端ajax调用时产生的跨域问题. 问题描述:跨域资源引起CORB. 解决方案: jsonp解决跨域问题 前端代码: // 回掉函数,默认callback=jQuery30004159376653216822_1550582355513 function showData(data) { console.info("Get Into showData"); // json对象转成字符串 var r

Python Flask框架——全栈开发(知了课堂)

章节1:Flask视图和URL 课时1[虚拟环境]为什么需要虚拟环境06:28 课时2[虚拟环境]virtualenv创建虚拟环境13:55 课时3[虚拟环境]virtualenvwrapper使用16:42 课时4[Flask预热]课程介绍45:34 课时5[Flask预热]Flask课程准备工作11:30 课时6[Flask预热]URL组成部分详解14:02 课时7[Flask预热]web服务器+应用服务器+web应用框架14:16 课时8[Flask URL]第一个flask程序详解24:

鱼书项目模块化总结

鱼书项目模块化总结 项目总体思路 模型类 视图蓝本 表单验证数据API flask上下文/ajax 1 异步发送邮件模块 邮件发送: 需要进行注册邮件发送或者功能模块需要发送邮件时可以采用: from threading import Thread from app import mail from flask import current_app,render_template from flask_mail import Message '''开启异步线程''' def send_async

Django---手动编写视图

手动编写视图 一. Request----->URL---->业务处理(Views)(Http Response) Response-------> 二. VOE    Django/Flask    JSON/ajax 三. 手动编写视图 - 实验目的: - 利用Django快捷函数手动编写视图处理函数 - 编写过程中理解视图运行原理 Views的目的: 1.业务处理 2.返回Response子类 2.1.拿到模板 2.2.拿到数据 2.3.环境变量 2.4.返回 四.分析 - dja

flask+sqlite3+echarts2+ajax数据可视化

前提: 准备Python + Flask+Sqlite3的平台环境(windows系统) 前面一节介绍flask怎么安装了,剩下sqlite3下载后解压,然后环境变量添加解压路径就行了 附加下载地址:http://www.sqlite.org/2016/sqlite-tools-win32-x86-3150200.zip 项目的目录结构 /www||-- /static| |jquery-1.6.2.js (可以是其他jquery-xx.js,在index.html里修改就行了)| |-- ec

Flask Ajax Demo

Python Code: from flask import Flask, jsonify, request, render_template app = Flask( __name__ ) @app.route( "/", methods = [ "POST", "GET" ] ) def index(): if request.method == "POST": first_name = request.form.get(

Flask web开发 处理Ajax请求

本文介绍如何处理ajax请求, 一.处理ajax的post请求 举例一: js代码举例如下: var id = obj.parentNode.parentNode.id; $.post("/delitem/"+id, {}, function(data){ showData(data); },"json"); 对应的flask代码举例如下: @app.route('/delitem/<id>', methods=['POST']) def delitem

flask+sqlite3+echarts2+ajax数据可视化报错:UnicodeDecodeError: &#39;utf8&#39; codec can&#39;t decode byte解决方法

flask+sqlite3+echarts2+ajax数据可视化报错: UnicodeDecodeError: 'utf8' codec can't decode byte 解决方法: 将 py文件和html文件用用记事本打开,然后另存为,将编码ANSI改成:UTF-8 flask+sqlite3+echarts2+ajax数据可视化报错:UnicodeDecodeError: 'utf8' codec can't decode byte解决方法