目录结构如下:

|--|
|--run.py
|--static
|--test.txt
|--templates
|--index.html

前端代码如下:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery Ajax Test</title>
<script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$.get("/mystring",function(data, status){
alert("数据: " + data + "\n状态: " + status);
});
}); $(".btn2").click(function(){
$.get("/mydict",function(data, status){
alert("name: " + data.name + " age:" + data.age);
});
}); $(".btn3").click(function(){
$.get("/mylist",function(data, status){
alert("name: " + data[0]+ " age:" + data[1]);
});
}); $(".btn4").click(function(){
$.ajax({url:"/mystring", data:{"mydata": "test"},success:function(data){
alert(data);
}});
}); $(".btn6_2").click(function(){
$.ajax({url:"/dataFromAjax", data:{"mydata": "test data"},success:function(data){
alert(data);
}});
}); $(".btn5").click(function(){
$.ajax({url:"/mydict", success:function(data){
alert("name: " + data.name + " age:" + data.age);
}});
}); $(".btn6").click(function(){
$.ajax({url:"/mylist", success:function(data){
alert("name: " + data[0] + " age:" + data[1]);
}});
}); $(".btn7").click(function(){
$("p").load("../static/test.txt");
});
$(".btn10").click(function(){
$("p").load("/mystring");
}); $(".btn8").click(function(){
$.getJSON("/mydict",function(data){
$.each(data, function(i, field){
$("div").append(field + " ");
});
});
}); $(".btn9").click(function(){
$.post("/mydict", function(data, status){
alert("name: " + data.name + " age:" + data.age);
});
});
});
</script> </head>
<body>
<h1>Ajax Test</h1>
<button class="btn1">get string</button>
<button class="btn2">get dict</button>
<button class="btn3">get list</button> <br/><br/>
<button class="btn4">ajax string</button>
<button class="btn5">ajax dict</button>
<button class="btn6">ajax list</button>
<button class="btn6_2">ajax sentDataToFlask</button><br/><br/>
<p>load:</p>
<button class="btn7">load from file</button>
<button class="btn10">load</button><br/><br/>
<div>getJson: </div><br/>
<button class="btn8">getJson</button><br/><br/>
<button class="btn9">post</button>
</body>
</html>

PS: test..txt 文件放在flask工程的static文件夹下。

Flask后端代码如下:

run.py

from flask import Flask, render_template, request
from flask import jsonify app = Flask(__name__)
app.config['SECRET_KEY'] = "dfdfdffdad" @app.route('/')
def index():
return render_template('index.html') @app.route('/mystring')
def mystring():
return 'my string' @app.route('/dataFromAjax')
def dataFromAjax():
test = request.args.get('mydata')
print(test)
return 'dataFromAjax' @app.route('/mydict', methods=['GET', 'POST'])
def mydict():
d = {'name': 'xmr', 'age': 18}
return jsonify(d) @app.route('/mylist')
def mylist():
l = ['xmr', 18]
return jsonify(l) if __name__ == '__main__':
app.run()

运行run.py,在浏览器打开http://127.0.0.1:5000/点击页面上的按钮即可测试不同的jQuery封装的ajax方法。

下载代码: https://github.com/xmanrui/FlaskConnectAjax

Flask---ajax(jquery)交互的更多相关文章

  1. 从零做网站开发:基于Flask和JQuery,实现表格管理平台

    摘要:本文将为大家带来基于Flask框架和JQuery实现管理平台网站的开发功能. [写在前面] 你要开发网站? 嗯.. 会Flask吗? 什么东西,没听过... 会JQuery吗? 是python的 ...

  2. 弹出层和ajax数据交互

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs& ...

  3. Ajax&jQuery教案总结

    Ajax&jQuery教程总结 目录 第一章 Ajax入门 6 第1讲 传统表单提交存在的问题 6 课程内容 6 1. 问题的引入 6 2. 问题的解决 6 参考进度(0.5课时) 7 第2讲 ...

  4. 【Django入坑之路】Django与Query Ajax的交互

    1:Jquery.ajax后端交互数据 $.ajax({ Url: /路由处理/, Type: GET/POST, #传送请求类型 Data: {user: “ XXXX”,pass:”XXXX”}, ...

  5. MVC中处理表单提交的方式(Ajax+Jquery)

    MVC中处理表单有很多种方法,这里说到第一种方式:Ajax+Jquery 先看下表单: <form class="row form-body form-horizontal m-t&q ...

  6. 关于AJAX 的交互模型、交互流程及代码示范

    AJAX  = 异步JavaScript + XML. 它是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况 ...

  7. ajax 、ajax的交互模型、如何解决跨域问题

    1.ajax是什么? — AJAX全称为“AsynchronousJavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术. — 不是一种新技 ...

  8. PHP与Ajax的交互更新页面

    PHP与Ajax的交互更新页面 本次主要学习ajax的概念以及怎么与PHP之间进行交互操作 1.什么是Ajax?    国内翻译常为“阿贾克斯”和阿贾克斯足球队同音,AJAX 是一种用于创建快速动态网 ...

  9. AJAX是什么? AJAX的交互模型(流程)?同步和异步的区别? AJAX跨域的解决办法?

      AJAX是什么? AJAX的交互模型(流程)?同步和异步的区别? AJAX跨域的解决办法? 分类: web前端面试题2013-07-20 22:40 630人阅读 评论(0) 收藏 举报 目录(? ...

  10. 30+最佳Ajax jQuery的自动完成插件的例子

    在这篇文章中,我们将介绍35个jQuery AJAX的自动完成提示例子. jQuery 的自动完成功能,使用户快速找到并选择一定的价值.每个人都想要快速和即时搜索输入栏位,因为这个原因,许 流行的搜索 ...

随机推荐

  1. 1-20StringBuffer简介

    StringBuffer是一个字符串缓冲区,如果需要频繁的对字符串进行拼接时,建议使用StringBuffer. 工作原理 StringBuffer的底层是char数组,如果没有明确设定,则系统会默认 ...

  2. josephus 问题的算法(转载)

    Josephus 问题: 一群小孩围成一个圈,任意假定一个数 m,从第一个小孩起,顺时针方向数,每数到第 m 个小孩时,该小孩便离开.小孩不断离开,圈子不断缩小,最后剩下的一个小孩便是胜利者.究竟胜利 ...

  3. CentOS 6.9:ntpdate[3115]: no server suitable for synchronization found

    在做一个集群实验,克隆的虚拟机,然后使用ntpdate就抛出了错误.机器之间可以互相ping通,selinux和iptables都已经关闭. [root@Server_2 ~]# service nt ...

  4. iOS 项目代码组织

    参考了很多系列,发现老外们都比较喜欢 group by type,这两个还不错: http://akosma.com/2009/07/28/code-organization-in-xcode-pro ...

  5. Hacker的社交礼仪与自我修养【转】

    Hacker School是位于纽约的一所特殊的编程“学校”,他们的目标是帮助参与者变成“更好的程序员”,之所以说他们特殊是因为这所“学校”没有老师,没有考试,也不会颁发证书,他们信奉三人行必有我师, ...

  6. 8 Explicit Animations 指明的动画 笔记

    8 Explicit Animations 指明的动画 笔记     If you want something done right, do it yourself. 如果你想让事情做好,那就自动来 ...

  7. 离开APM的弹性云还是真弹性吗

    准确来说应该叫脱离业务的弹性云或者容器都是伪弹性.之所以标题中有APM一是因为它近来热门,二是因为它在我将要说的这个事情上起到关键性的作用. 不管是亚马逊的弹性云.容器方案或者国内众多云厂商在自动伸缩 ...

  8. jdbc获取数据具体过程

    下面是个最简单的使用jdbc取得数据的应用.在例子之后我将分成4步,分别是①取得连接,②创建PreparedStatement,③设置参数,④执行查询,来分步分析这个过程.除了设置参数那一步之外,其他 ...

  9. leetcode_268.missing number

    给定一个数组nums,其中包含0--n中的n个数,找到数组中没有出现的那个数. 解法一:cyclic swapping algorithm class Solution { public: int m ...

  10. c语言 预处理的使用 宏展开下的#,##

    1. #include   包含头文件 2.define 宏定义(可以理解为替换,不进行语法检查) 写法 #define 宏名 宏体  加括号 #define ABC (5+3) #define AB ...