在查询的时候是使用ajax进行请求的

目录结构

personal.models

from datetime import datetime
from flask_sqlalchemy import SQLAlchemy

db = SQLAlchemy()

class Department(db.Model):
    """ 部门 """
    __tablename__ = 'department'
    # primary_key=True：主键, autoincrement=True：自动递增
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    name = db.Column(db.String(50), unique=True)

    def __init__(self, name):
        self.name = name

    def __repr__(self):
        return f'部门{self.id}，{self.name}'

class Employee(db.Model):
    """ 员工 """
    __tablename__ = 'employee'
    # primary_key=True：主键, autoincrement=True：自动递增
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    name = db.Column(db.String(50))
    gender = db.Column(db.String)
    job = db.Column(db.String)
    birthdate = db.Column(db.Date)
    idcard = db.Column(db.String)
    address = db.Column(db.String)
    salary = db.Column(db.Float)
    release_time = db.Column(db.DateTime)

    # 外键： db.Column(db.Integer, db.ForeignKey(表名))
    department_id = db.Column(db.Integer, db.ForeignKey('department.id'))  # 声明是外键，为department表的id字段

    # db.relationship('Department', backref=db.backref('employee', lazy='dynamic'))
    # db.relationship(主键类名, backref=引用属性名, lazy='dynamic'))
    # lazy：延迟查询：dynamic：动态、select、subquery、joined
    department = db.relationship('Department', backref=db.backref('employee', lazy='dynamic'))  # 类与表的关系

    def __init__(self, name=None, gender=None, job=None, birthdate=None, idcard=None, address=None, salary=None,
                 release_time=None):
        self.name = name
        self.gender = gender
        self.job = job
        self.birthdate = birthdate
        self.idcard = idcard
        self.address = address
        self.salary = salary
        self.release_time = release_time if release_time else datetime.now()

    def __repr__(self):
        return f'员工：{self.id} {self.name} {self.salary} {self.address}'

if __name__ == '__main__':
    db.create_all()

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <title>ajax员工查询</title>
</head>
<body>
<h1>ajax员工查询</h1>
名称：<input type="text" id="name">
<p>
    <button id="btnLoad">Load查询员工</button>
    <button id="btnGet">GET查询员工</button>
    <button id="btnAjax">ajax查询员工</button>
</p>
<div id="emp-list"></div>
</body>
</html>
<script>
    $(document).ready(function () {

        // load方法
        $('#btnLoad').click(function () {
            var name = $('#name').val();  // 获取查询条件
            $('#emp-list').load('/employee/?name=' + name);  // 把查询条件和地址拼接起来
        });

        // get方法
        $('#btnGet').click(function () {
            var name = $('#name').val();  // 获取查询条件
            $.get(
                '/employee/',
                {'name': name},
                function (response) {
                    $('#emp-list').html(response);  // 把返回的html加到id为emp-list的标签下
                }
            );
        });

        // ajax方法
        $('#btnAjax').click(function () {
            $.ajax({
                url: '/employee/',
                data: {'name': $('#name').val()},
                method: 'GET',
                success: function (response) {
                    $('#emp-list').html(response);  // 把返回的html加到id为emp-list的标签下
                }
            });
        });
    });
</script>

main.py

from flask import Flask, render_template, request
from flask_sqlalchemy import SQLAlchemy
from personal.models import Employee

app = Flask(__name__, static_url_path='')
db = SQLAlchemy(app)

app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///./db/test.db'  # 声明数据库类型和地址
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = True  # 跟踪改变

# app.config['SQLALCHEMY_ECHO'] = True  # 打印对应的sql，此操作用sql是怎么样的

@app.route('/employee/')
def employee_query():
    """ 这里图省事，就根据前端出过来的值，进行查询，并把查询出来的结果拼接成表格返回到前端 """
    name = request.args.get('name', '')
    table_header = """
    <table border="1">
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>地址</th>
            <th>工资</th>
        </tr>
    """
    emps = Employee.query.filter(Employee.name.contains(name)).all()
    rows = ""
    for emp in emps:
        rows += f"""<tr><td>{emp.id}</td><td>{emp.name}</td><td>{emp.address}</td><td>{emp.salary}</td></tr>"""
    table_footer = "</table>"
    return table_header + rows + table_footer

@app.route('/ajax_query/')
def ajax_query():
    return render_template('emp-query.html')

前端

load

get

ajax

测开之路一百五十三：ajax之load、get、ajax在项目中的体现的更多相关文章

  1. 测开之路一百五十五：jquery-validation前台数据验证

    前面做的wtform验证是服务器端的验证,需要把数据传输到服务器,服务器验证后再吧结果传输到前端,网络慢的时候,用户体验不好,所以需要前端验证,且后端验证不能少 传统的js或者jquery如果要验证信 ...

  2. 测开之路一百五十四：ajax+json前后台数据交互

    在实际工作中,前后端数据交互大部分都是用的json格式,后端把数据处理完后,把json传给前端,前端再解析 项目结构 models里面加入把数据转为字典的方法 from datetime import ...

  3. 测开之路一百五十二：基于jquery的ajax实现之load、get、ajax

    ajax除了用原生的js实现之外,也可以使用jquery实现,而且用jquery更方便 看一个简单的示例,保留上一篇的content路由和html,实现上一篇一样的功能,点击获取内容,局部刷新 准备一 ...

  4. 测开之路一百五十一：ajax的作用和基本实现原理

    有些情况需要请求和刷新部分资源,但是又不希望整个页面都刷新,这个时候就需要用ajax来处理,即页面的某一部分触发请求和刷新内容 准备两个视图和html from flask import Flask, ...

  5. 测开之路一百三十三：实现sql函数封装

    连接数据库的频率很高,所以把数据库操作封装起来 函数封装: def make_dicts(cursor, row): """ 将游标获取的Tuple根据数据库列表转换为d ...

  6. 测开之路一百二十三：快速搭建python虚拟环境

    前提:已装好python3.4+且环境可正常运行 一:手动搭建: 准备好一个工作目录 管理员运行cmd,进入到准备的目录里面 执行命令:python -m venv 虚拟环境名 激活虚拟环境(在ven ...

  7. 测开之路一百二十五：flask之urlencode参数传递和解析

    当get请求传参时,用?分隔参数和域名,用&分隔参数,如果参数里面本身就有&符号就会识别不出来,还是会当成分隔符,所以这些数据在传输的时候,就需要转义,现在普遍是转成urlencode ...

  8. 测开之路一百零五：bootstrap的两种引用方式

    一:下载到本地引用: 3.3.7版本:https://getbootstrap.com/docs/3.3/getting-started/#download 下载后解压到本地项目中引用 第二种,cdn ...

  9. 测开之路一百四十三：ORM框架之SQLAlchemy模型及表创建

    基于前一篇内容,可以使用模型的结构 目录结构 main,入口层 from flask import Flaskfrom flask_sqlalchemy import SQLAlchemy app = ...

随机推荐

  1. 2019-11-29-C#-在-8.0-对比-string-和-string_-的类型

    title author date CreateTime categories C# 在 8.0 对比 string 和 string? 的类型 lindexi 2019-11-29 8:59:0 + ...

  2. MySQL的简单条件判断语句

    在MySQL中条件判断语句常用于数据转换,基于现有数据创建新的数据列,使用场景还是比较多. 基础样式: CASE WHEN`条件`THEN`结果` ELSE`默认结果` END 在同一条判断语句中可以 ...

  3. System.Windows.Forms.Application.DoEvents();

    关于Application.DoEvents()的小研究 在MSDN中的备注是: 当运行 Windows 窗体时,它将创建新窗体,然后该窗体等待处理事件.该窗体在每次处理事件时,均将处理与该事件关联的 ...

  4. Problem 1538 - B - Stones II 贪心+DP

    还是给你石头n枚,每一枚石头有两个值a和b,每取一个石头,除了这块石头其余所有的石头的a就都减去这个石头的b,问你取了的石头的a的总和最大可以为多少? 先按B从大到小排序 然后DP: 取的话:dp[i ...

  5. ASP.NET 中 取得 Repeater 里的checkbox值

    前言:这两天在维护ASP.NET的项目,需要做一个checkbox来选择数据进行导出,下面提供两种解决思路 1.ASP:CheckBox asp:CheckBox自带控件,没有Value值 <a ...

  6. windows环境下 RabbitMQ 安装时创建用户流程命令

    https://blog.csdn.net/xiaojieblog/article/details/70332469

  7. Mockplus、Axure、墨刀软件对比

    Mockplus 优点:基础版免费使用,操作简单,上手快,交互简单(只需拖曳就可以),功能多样,组件资源丰富,预览方式和导出类型多样,支持团队协作. 缺点:不支持手势交互. Axure 优点:操作变化 ...

  8. 【Python系列】Python自动发邮件脚本

    缘起 这段时间给朋友搞了个群发邮件的脚本,为了防止进入垃圾邮件,做了很多工作,刚搞完,垃圾邮件进入率50%,觉得还不错,如果要将垃圾邮件的进入率再调低,估计就要花钱买主机了,想想也就算了,先发一个月, ...

  9. react-native window下创建Hello（解决创建一路的坑）

    今天真的颇为激动,1年没有玩RN,竟然被最新的RN版本0.55.4创建Hello折腾了半天,想当年刚玩RN创建环境用了3天, 想想现在也是不容易啊半天就搞定了,目测以后创建的话也就1-2个小时就搞定了 ...

  10. 洛谷P1105 普及- 生日

    标签:模拟,字符串,排序(快排) 这道题可以巧妙地运用结构体中记录在数组中的位置,来对sort做点手脚 题意本身就是记录一些人,他们出生日的日期,然后输出从小到大的名字.如果是同一天,则输出在输入序列 ...