python使用flask与js进行前后台交互的例子


Posted in Python onJuly 19, 2019

flask与js进行前后台交互代码如下,后台给前端发数据:

python部分:

# -*- coding: utf-8 -*-
from flask import Flask,jsonify,render_template
import json
 
app = Flask(__name__)#实例化app对象
 
testInfo = {}
 
@app.route('/test_post/nn',methods=['GET','POST'])#路由
def test_post():
  testInfo['name'] = 'xiaoming'
  testInfo['age'] = '28'
  return json.dumps(testInfo)
 
@app.route('/')
def hello_world():
  return 'Hello World!'
 
@app.route('/index')
def index():
  return render_template('index.html')
 
 
if __name__ == '__main__':
  app.run(host='0.0.0.0',#任何ip都可以访问
      port=7777,#端口
      debug=True
      )

js部分:

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>echarts</title>
  <style type="text/css">
    html,
    body {
      width: 100%;
      height: 100%;
    }
 
    body {
      margin: 0px;
      padding: 0px
    }
 
    div {
      float: left;
    }
 
    #container {
      width: 50%;
      height: 100%;
    }
 
    #info {
      padding: 10px 20px;
    }
  </style>
</head>
 
<body>
  <div id="container"></div>
  <div id="info">数据展示:</div>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
	<script>
    $.ajax({
    url: "test_post/nn",
    type: "POST",
    dataType: "json",
    success: function (data) {
      console.log(data)
    }
    })
 
	</script>
  
</body>
 
</html>

以上这篇python使用flask与js进行前后台交互的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Python 相关文章推荐
利用Python获取操作系统信息实例
Sep 02 Python
详解python 字符串和日期之间转换 StringAndDate
May 04 Python
python pandas dataframe 按列或者按行合并的方法
Apr 12 Python
wxPython实现分隔窗口
Nov 19 Python
python输出数组中指定元素的所有索引示例
Dec 06 Python
pytorch 图像预处理之减去均值,除以方差的实例
Jan 02 Python
python 解决flask 图片在线浏览或者直接下载的问题
Jan 09 Python
Python多线程thread及模块使用实例
Apr 28 Python
Python 求向量的余弦值操作
Mar 04 Python
Python使用Kubernetes API访问集群
May 30 Python
Python 如何利用ffmpeg 处理视频素材
Nov 27 Python
PyCharm 配置SSH和SFTP连接远程服务器
May 11 Python
Django 模型类(models.py)的定义详解
Jul 19 #Python
Tensorflow实现神经网络拟合线性回归
Jul 19 #Python
使用TensorFlow实现简单线性回归模型
Jul 19 #Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
Jul 19 #Python
简单了解django缓存方式及配置
Jul 19 #Python
python实现最小二乘法线性拟合
Jul 19 #Python
这可能是最好玩的python GUI入门实例(推荐)
Jul 19 #Python
You might like
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
php max_execution_time执行时间问题
2011/07/17 PHP
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
jquery弹出框的用法示例(2)
2013/08/26 Javascript
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
2016/10/27 Javascript
jquery与ajax获取特殊字符实例详解
2017/01/08 Javascript
浅析 NodeJs 的几种文件路径
2017/06/07 NodeJs
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
Three.js基础学习之场景对象
2017/09/27 Javascript
webstorm添加*.vue文件支持
2018/05/08 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
python通过线程实现定时器timer的方法
2015/03/16 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
初中考试作弊检讨书
2014/02/01 职场文书
大学社团活动总结
2014/04/26 职场文书
青涩记忆观后感
2015/06/18 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
处理canvas绘制图片模糊问题
2022/05/11 Javascript