注意:在左侧菜单栏(在JQuery插件库下载的)右边是采用<iframe> 标签嵌入其他页面,此时标签的src应用用后台中的方法名称(本人测试用的是无参数的方法),

而页面跳转window.location.href和<a>标签的href的url必须是后台路由名称。

1,首先是在左侧菜单栏中加了一个<a>标签,并且写了个调用后台返回infor.html页面的js方法:

  1. <a href="javascript:void(0)" id="btninfor22" onclick="showdata()" style="font-style: initial;background-color: #d6e9c6"> 学生信息表</a>
  1. function showdata() {
  2.  
  3. $.get("/infor", {"hno": "123"},
  4. function (data, status) {
  5. if (data != "undefined" && data != "insertok") {
  6. //$("#content").html(data);
  7. //src里url是后台里的方法名称。而<a>标签里href的地址是后台路由名称
  8. $("#content").html('<iframe style="width: 1100px;height: 600px" src="{{ url_for('py_infor')}}" id="myiframe" frameborder="0"></iframe>');
  9. }
  10. else {
  11. alert("插入失败,状态:" + status);
  12. }
  13. });
  14. }

2.其次在左侧菜单栏右边放了个<div>:

  1. <div class="container" style="background-color: #e6e6e6" id="content">
  2. <p>右侧内容</p>
  3. </div>

3.最后在后台中写好方法(py_infor()):

  1. @app.route('/infor') #页面链接该路由名称
  2. def py_infor():
  3. # //查询数据
  4. getsql = "SELECT * FROM dbo.infor"
  5. inforlist = getdata(getsql)
  6. return render_template('infor.html', inforlist=inforlist)
  7. return render_template('infor.html') # send_file('/templates/testhtm.html') #

2018.7.24  added by longdb

window.open()打开个新页面:url必须是后台方法名称。

  1. window.open('{{url_for("py_getaddinfor") }}','_blank','width=500px,height=500px,resizable=0,scrollbars=auto');

2018.7.25 added by longdb

在一个页面中插入另外一个页面:

  1.  
  1. <div class="container" style="background-color: #e6e6e6" id="content">
  2. <p>右侧内容</p>
  3. {% include "editaddinforview.html" %}
  4. </div>
  1.  
  1.  

最后效果:

Phyton Flask框架学习记录。的更多相关文章

  1. 4.VUE前端框架学习记录四:Vue组件化编码2

    VUE前端框架学习记录四:Vue组件化编码2文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...

  2. 3.VUE前端框架学习记录三:Vue组件化编码1

    VUE前端框架学习记录三:Vue组件化编码1文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...

  3. 2.VUE前端框架学习记录二

    VUE前端框架学习记录二:Vue核心基础2(完结)文字信息没办法描述清楚,主要看编码实战里面,有附带有一个完整可用的Html页面,有需要的同学到脑图里面自取.脑图地址http://naotu.baid ...

  4. 1.VUE前端框架学习记录一

    VUE前端框架学习记录一文字信息没办法描述清楚,主要看编码实战里面,有附带有一个完整可用的Html页面,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/file/f0 ...

  5. python web开发之flask框架学习(1) 创建flask项目

    python 开发越来越火,作为菜鸟,也应该学习一下,感觉还可以,记录下来,方便学习参考. 不管做什么开发首先肯定是安装环境,这里我用的是pycharm,python3.如果不清楚怎么安装环境可以去网 ...

  6. flask admin学习记录

    flask admin是flask框架中一个非常好用的后台管理框架,但是由于文档内容太少,经常遇到问题无法解决,这里记录一下 一简单的使用 from flask import Flask from f ...

  7. python web开发之flask框架学习(2) 加载模版

    上次学习了flask的helloword项目的创建,这次来学习flask项目的模版加载: 第一步:创建一个flask项目 第二步:在项目目录的templates文件夹下创建一个html文件 第三步: ...

  8. python flask框架学习——开启debug模式

    学习自:知了课堂Python Flask框架——全栈开发 1.flask的几种debug模式的方法 # 1.app.run 传参debug=true app.run(debug=True) #2 设置 ...

  9. python flask框架学习(二)——第一个flask程序

    第一个flask程序 学习自:知了课堂Python Flask框架——全栈开发 1.用pycharm新建一个flask项目 2.运行程序 from flask import Flask # 创建一个F ...

随机推荐

  1. 21. Date 函数

    SQL 日期 当我们处理日期时,最难的任务恐怕是确保所插入的日期的格式,与数据库中日期列的格式相匹配. 只要数据包含的只是日期部分,运行查询就不会出问题.但是,如果涉及时间,情况就有点复杂了. 在讨论 ...

  2. CF570D Tree Requests

    离线 + 树状数组 如果子树中的一个深度的所有点中有两个以上的字母出现了奇数次,那么这个询问的答案就是$No$,其他的情况吧都是$Yes$. 由于只有$26$个字母,我们可以考虑暴力检验,把树映射到$ ...

  3. fDDA

    fDDA:fast DDA,快速的动态数据认证 中国余数定理模式: 就是中国的古人发明的多项式除以多项式的结果的一个定理 AC:应用密文,application cryptogram(密文) gene ...

  4. 关于jeecms修改首页进行测试

    由于要学习,jeecms的标签使用,那么必须要有一个测试页.关于首页如何使之用之当测试页. 修改的步骤,找到web.xml文件修改 <welcome-file-list> <welc ...

  5. 那些年我们追过的SQL

    SQL是大学必修课程之一二维表结构,看着就是一种美感. 针对近期感情,聊一聊,在平时容易犯的一个错误,看看你是不是中枪了. 我们还是选用传统的student表(请不要考虑表的结构是否合理)ID     ...

  6. Android中如何下载文件并显示下载进度

    原文地址:http://jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1125/2057.html 这里主要讨论三种方式:AsyncTask.Serv ...

  7. TSQL--删除正在运行的数据库

    ); SET @dbName='DB1_SNAP' BEGIN TRY --===================================== --查找当前数据库所有连接并删除 DECLARE ...

  8. React + Dva + Antd + Umi 概况

    Dva 由阿里架构师 sorrycc 带领 team 完成的一套前端框架,在作者的 github 里是这么描述它的:"dva 是 react 和 redux 的最佳实践". Ant ...

  9. React进阶篇(1) -- react-router4模块化

    本篇内容: 单一的路由无嵌套 多层嵌套路由 获取路径中的参数 按需加载 单一的路由无嵌套 routers.js import Home from 'components/Home'; import N ...

  10. javascript正则表达式——元字符

    元字符(Metacharacter)是拥有特殊含义的字符: 元字符        描述 (1)   .             查找单个字符,除了换行和行结束符. 例子: <!DOCTYPE h ...