flask html下拉列表,在Flask框架中，在html做下拉式選單，選完顯示連結MySQL資料庫的資料...

順便寫了ajax版的，主要是javascript的操作。

code要寫的稍微多一點，不過這樣可以分離html，而且更靈活。

index.py

from flask import Flask, render_template, request

from flask_sqlalchemy import SQLAlchemy

import os

app = Flask(__name__)

# 將db放在專案的資料夾

db_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), "test.db")

app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:{}'.format(db_path)

db = SQLAlchemy(app)

class Person(db.Model):

tablename = 'person'

id = db.Column(db.Integer, primary_key=True)

name = db.Column(db.String(255))

age = db.Column(db.Integer)

# index.html目前僅列出所有人之id

@app.route('/')

def all_persons():

persons = Person.query.all() # 先取得所有人

# 傳回所有的人

return render_template("index.html", persons=persons)

# ajax取得人員資訊

@app.route('/GET/Person/')

def ajax_get_person_info(pid):

the_one = Person.query.get(pid)

if the_one:

# 另開模版(person_info.html)給ajax去做回應

return render_template('person_info.html', the_one=the_one)

else:

# 找不到人的回傳

return "

Sorry，查無此人喔！！

if __name__ == '__main__':

# 初始化db

if not os.path.exists(db_path):

db.create_all()

db.session.add(Person(name="Jack", age=24))

db.session.add(Person(name="Mary", age=18))

db.session.commit()

app.run()

index.html，現在可以看到DOM結構是只有列出ID而已了。

Document

{% for p in persons %}

{% endfor %}

// ajax

$('#btn').click(function(){

var id = $('#pid').val();

$.get({

url: "/GET/Person/" + id,

}).done(function(res){

$('#display').empty();

$('#display').append(res);

})

});

person_info.html

姓名：{{ the_one.name }}

年齡：{{ the_one.age }}

flask html下拉列表,在Flask框架中，在html做下拉式選單，選完顯示連結MySQL資料庫的資料...相关推荐

flask html下拉列表,用Flask框架作两个关联式的下拉式选单，抓取资料库资料
先前做好一个下拉式选单连结数据库,但是如果要作成双关联下拉式,选取好之后按钮,再从数据库抓取数据,却一直没办法,数据库如下: ID Model_Name value_without time 0050 ...
easyui下拉框option写死_JavaScript_jQuery+easyui中的combobox实现下拉框特效，1.第一种写法：Input框中显示： - phpStudy...
jQuery+easyui中的combobox实现下拉框特效 1.第一种写法:Input框中显示: 2. 第二种用法,在list列表中显示: 类别 3. 第二种的另一种写法: 类别以上3种方法均可实 ...
怎么在html5中制作下拉导航栏,在PPT中制作下拉式导航菜单效果的方法
为了提高PPT演示文稿的观赏性,用户可能希望在PPT幻灯片中添加下拉式导航菜单效果,通过该导航菜单在不同幻灯片间进行导航(如图1所示),制作下拉式导航菜单的具体操作步骤如下. 图1 下拉式导航菜单 ( ...
Java Swing中的下拉式菜单(menu)、弹出式菜单(JPopupMenu)、选项卡窗体(JTabbedPane),TextArea右键菜单组件使用案例
文章目录 1.. Java弹出菜单,为JTextArea添加了右键弹出式菜单 2.:下拉式菜单的创建步骤: 3:弹出式菜单的创建步骤: 4:选项卡窗体: 菜单是GUI中最常用的组件,菜单不是Compo ...
excel 表做下拉框_Excel工作表的组合框下拉列表
excel 表做下拉框 Would you prefer a bigger font size for items in a data validation drop down list? Would ...
access字段属性设置下拉列表_关于下拉式菜单，这一篇足够了
下拉菜单主要有两种类型: 1.用于导航的下拉菜单: 2.用于表单的下拉菜单. 在本文中,我们将对以下内容进行介绍: 1. 结构剖析下拉菜单的解剖结构与文本输入字段的解剖结构非常相似. 2.下拉菜单类 ...
android 4.4 禁止下拉,Android开发中禁止下拉式的实现技巧
我们开发项目的时候,经常会看到禁止的情况,而Android开发中并没有直接调用的接口,下面是爱站技术频道小编就给大家介绍的Android开发中禁止下拉式的实现技巧,希望网友们喜欢! 分享给大家供大家参 ...
php 下拉菜单不提交选中的值,在html中怎样可以做到下拉菜单提交后保留选中值不返回默认值...
这次给大家带来在html中怎样可以做到下拉菜单提交后保留选中值不返回默认值,在html中做到下拉菜单提交后保留选中值不返回默认值的注意事项有哪些,下面就是实战案例,一起来看一下. 代码如下: // 获 ...
选下拉框的的值对应上传相应的图片_如何在excel中实现，选择下拉菜单某一项，该表格中就出现选项对应的数据？(excel表格制作选择数据)...
怎样从多个excel表格中提取数据,做数据分析图呢 1. 数据的.录入.表格的设置,效果如示. 2.如图所示,选进行分析的图据范围 3.如图所示,点击菜单栏目上的"插入",选择&q ...

flask html下拉列表,在Flask框架中，在html做下拉式選單，選完顯示連結MySQL資料庫的資料...

flask html下拉列表,在Flask框架中，在html做下拉式選單，選完顯示連結MySQL資料庫的資料...相关推荐

最新文章

热门文章