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

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进行前后台交互的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Python flask框架post接口调用示例

    本文实例讲述了Python flask框架post接口调用.分享给大家供大家参考,具体如下: from flask import Flask,render_template,request app = Flask(__name__) @app.route("/login",methods = ['POST','GET']) def login(): if request.method == "POST": username = request.form.get('u

  • Python Flask前后端Ajax交互的方法示例

    Python Flask前后端Ajax交互的方法示例

    之前总结过flask里的基础知识,现在来总结下flask里的前后端数据交互的知识,这里用的是Ajax 一. post方法 1.post方法的位置:在前端HTML里,绑定在一个按钮的点击函数里,或者一个鼠标输入框点击离开事件. (1)数据附在URL里(请求路径),发送到后端. /*前端HTML<script>里:*/ $.post("/js_post/"+ip, data_to_backend, function(data){alert("success "

  • 使用Python的Flask框架来搭建第一个Web应用程序

    使用Python的Flask框架来搭建第一个Web应用程序

    1.初始化 在这章,你将学到Flask应用程序的不同部分.同时,你将编写和运行你的第一个Flask web应用程序. 所有的Flask应用程序都必须创建一个 应用程序实例 .使用web服务器网关接口协议将所有从客户端接收的请求传递给这个对象处理.这个应用程序实例就是Flask类的一个对象,通常使用下面的方式创建: from flask import Flask app = Flask(__name__) Flask类构造函数唯一需要的参数就是应用程序的主模块或包.对于大多数应用程序,Python

  • python flask框架实现传数据到js的方法分析

    本文实例讲述了python flask框架实现传数据到js的方法.分享给大家供大家参考,具体如下: 首先要清楚后台和前端交互所采用的数据格式. 一般选JSON,因为和js完美贴合. 后台返回的数据进行序列化 在/homepageRecommend 路由的 view方法中返回序列化数据 dict = {"a":1, "b":2}<br data-filtered="filtered"> import json json.dumps(di

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

    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['

  • mock.js模拟前后台交互

    mock.js模拟前后台交互

    本文实例为大家分享了mock.js模拟前后台交互的具体代码,供大家参考,具体内容如下 使用背景: vue项目 axios 使用详情: 1.首先安装 # 在项目中安装 npm install mockjs 2.在项目中使用 在项目中src文件夹下 新建mock文件夹 新建mock.js 和index.js文件 这里面用来生成基础的接口 项目结构截图: 数据 mock.js 文件 //-----------------mock.js------------------- // 引入mockjs im

  • 原生node.js案例--前后台交互

    本案例包含4部分:(1)HTML部分:(2)ajax部分:(3)JavaScript部分:(4)node服务器部分.另外,因为牵涉到服务器,所以这里没法"效果预览". 执行过程为: (1)在浏览器地址栏输入网址,向node服务器发送HTML请求:服务器接到请求后,返回一个HTML文件给客户端: (2)客户端浏览器对HTML进行渲染,遇到<script>标签后,再次向服务器请求,服务器响应一个JavaScript文件给客户端, (3)客户端浏览器对JavaScript文件进行

  • django实现前后台交互实例

    django实现前后台交互实例

    本文介绍了django实现前后台交互实例,分享给大家,希望对大家有所帮助 准备工作: 前端框架:AngularJS+bootstap 数据库:sqlite3 前端代码: index.html <!DOCTYPE html> <html> <head> <link href="/WebApi/scripts/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow"

  • 利用Python的Flask框架来构建一个简单的数字商品支付解决方案

    利用Python的Flask框架来构建一个简单的数字商品支付解决方案

    作为一个程序员,我有时候忘了自己所具有的能力.当事情没有按照你想要的方式发展时,却很容易忘记你有能力去改变它.昨天,我意识到,我已经对我所出售的书的付款处理方式感到忍无可忍了.我的书完成后,我使用了三个不同的数字商品支付处理器,在对它们三个都感到不满后,我用Python和Flask,两个小时的时间写出了我自己的解决方案.没错!两个小时!现在,这个系统支撑着我的书籍付费流程,整个过程难以置信的简单,你可以在20秒内购买书籍并开始阅读. 往下看,看我是如何在一夜之间完成我自己的数字商品支付解决方案的

  • ASP.net与SQLite数据库通过js和ashx交互（连接和操作）

    ASP.net与SQLite数据库通过js和ashx交互（连接和操作）

    ASP.net与SQLite数据库通过js和ashx交互(连接和操作): 废话(也是思路):用的是VS2010,打算做网站前后台.由于不喜欢前台语言里加些与html和css和js的其他内容,想实现前后台语言的分离,与前后台通过js的ajax实现交互,故很多百度出来的方法不成立,虽听说ashx过时,但是他实现了我要的效果:即前后台语言不是相互嵌入实现交互,而是通过js实现(有接口就可以). 由于领导指定用SQLite,故这两天还折腾了SQLite,不过对于这种小型的网站,它是个很好的选择(不需要部

  • python使用Flask操作mysql实现登录功能

    用到的一些知识点:Flask-SQLAlchemy.Flask-Login.Flask-WTF.PyMySQL 这里通过一个完整的登录实例来介绍,程序已经成功运行,在未登录时拦截了success.html页面跳转到登录页面,登录成功后才能访问success. 以下是项目的整体结构图: 首先是配置信息,配置了数据库连接等基本的信息,config.py DEBUG = True SQLALCHEMY_ECHO = False SQLALCHEMY_DATABASE_URI = 'mysql+pymy

  • Layui前后台交互数据获取java实例

    Layui简介 Layui是一款适用于后台程序员的UI框架,学习成本低.Json数据格式交互前后台,并且也相当适用单页面开发.有兴趣的朋友可以看看layui官网. Layui前后台数据交互 layui有自己的一套特定的数据格式交互(这很重要),必须参数code:0,msg:"",count:数据size(int),data:"数据List".一般我们选择封装返回接收类. Layui前台js请求数据 其中 html代码 <link rel="style

  • python之Flask实现简单登录功能的示例代码

    网站少不了要和数据库打交道,归根到底都是一些增删改查操作,这里做一个简单的用户登录功能来学习一下Flask如何操作MySQL. 用到的一些知识点:Flask-SQLAlchemy.Flask-Login.Flask-WTF.PyMySQL 这里通过一个完整的登录实例来介绍,程序已经成功运行,在未登录时拦截了success.html页面跳转到登录页面,登录成功后才能访问success. 以下是项目的整体结构图: 首先是配置信息,配置了数据库连接等基本的信息,config.py DEBUG = Tr

  • Python编程flask使用页面模版的方法

    Python编程flask使用页面模版的方法

    在flask中可以像go和angular那样使用页面模版(template),可以将HTML页面显示进行模版化,通过参数传递与页面进行数据交互. 概要信息 事前准备:flask liumiaocn:flask liumiao$ which flask /usr/local/bin/flask liumiaocn:flask liumiao$ flask --version Flask 1.0.2 Python 2.7.10 (default, Jul 15 2017, 17:16:57) [GC

随机推荐