目录结构如下：

|--|

   |--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. 149 Max Points on a Line 直线上最多的点数

    给定二维平面上有 n 个点,求最多有多少点在同一条直线上. 详见:https://leetcode.com/problems/max-points-on-a-line/description/ Jav ...

  2. (026)[工具软件]剪切板管理:Ditto

    剪切板管理软件:Ditto官网:http://ditto-cp.sourceforge.net/

  3. 【学习笔记】深入理解js原型和闭包（0）——目录

    文章转载:https://www.cnblogs.com/wangfupeng1988/p/4001284.html 说明: 本篇文章一共16篇章,外加两篇后补的和一篇自己后来添加的学习笔记,一共19 ...

  4. Python3基础教程（十五）—— PEP8 代码风格指南

    编程语言不是艺术,而是工作或者说是工具,所以整理并遵循一套编码规范是十分必要的. 这篇文章原文实际上来自于这里:https://www.python.org/dev/peps/pep-0008/ 有很 ...

  5. 网新恩普（T 面试）

    1.你们项目中哪里用到了Redis? 2.介绍一下你的这个微服务项目

  6. 约瑟夫环（java）

    问题描述:n个人围成一圈,每隔k个杀死一个,问最后的幸存者的编号 假设标号是0 ~ n-1,幸存者是f[n] 1.特殊情况:f[1]=0 2.一般情况:f[n] = (f[n-1]+k)%n 游戏开始 ...

  7. this.$emit('on-select-change' emit里面不能写大写字母

    this.$emit('on-select-change' emit里面不能写大写字母 刚试了下 也能写大写 但是 两边就都写一样就完了,就都写成带-的就完了

  8. 前端基础入门第一阶段-Web前端开发基础环境配置

    Web前端和全栈的定义: A.什么是传统传统web前端:需要把设计师的设计稿,切完图,写标签和样式,实现JS的效果,简而言之即只需要掌握HTML的页面结构,CSS的页面样式,javaScript页面的 ...

  9. C-基础：函数返回局部变量

    一般的来说,函数是可以返回局部变量的. 局部变量的作用域只在函数内部,在函数返回后,局部变量的内存已经释放了.因此,如果函数返回的是局部变量的值,不涉及地址,程序不会出错.但是如果返回的是局部变量的地 ...

  10. PHP14 动态图像处理

    学习要点 如何使用PHP中的GD库 设计验证码类 PHP图片处理 设计图像图处理类 如何使用PHP中的GD库 在网站上GD库通常用来生成缩略图,或者用来对图片加水印,或者用来生成汉字验证码,或者对网站 ...