测开之路一百五十三:ajax之load、get、ajax在项目中的体现

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

目录结构

personal.models

from datetime import datetimefrom 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, requestfrom flask_sqlalchemy import SQLAlchemyfrom 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

原文地址:https://www.cnblogs.com/zhongyehai/p/11565452.html

时间: 2024-10-07 06:59:00

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

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

前面做的wtform验证是服务器端的验证,需要把数据传输到服务器,服务器验证后再吧结果传输到前端,网络慢的时候,用户体验不好,所以需要前端验证,且后端验证不能少 传统的js或者jquery如果要验证信息,需要把一个个元素下的信息拿下来,再验证,而validation可以根据元素定位,可以直接就验证了 validation官网:https://jqueryvalidation.org/cnd引用地址:https://www.bootcdn.cn/jquery-validate/引用标签:<scri

测开之路一百五十二:基于jquery的ajax实现(load、get、ajax)

ajax除了用原生的js实现之外,也可以使用jquery实现,而且用jquery更方便 看一个简单的示例,保留上一篇的content路由和html,实现上一篇一样的功能,点击获取内容,局部刷新 准备一个页面用于被调用 <h1>这是content.html的h1标签</h1><p style="background: red"> 这是content.html的p标签,红色 <a href="https://www.baidu.com/&

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

一:下载到本地引用: 3.3.7版本:https://getbootstrap.com/docs/3.3/getting-started/#download 下载后解压到本地项目中引用 第二种,cdn标签引用:https://www.bootcdn.cn/twitter-bootstrap/ 为了稳定,找3.3.7版本,min.css,复制标签:<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap

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

当get请求传参时,用?分隔参数和域名,用&分隔参数,如果参数里面本身就有&符号就会识别不出来,还是会当成分隔符,所以这些数据在传输的时候,就需要转义,现在普遍是转成urlencode编码:%20%xx%23 在jinja2模板里面,可以使用 data|urlencode 发送urlencode编码,而python里面又有urllib.parse.unquote()可以解析urlencode编码 视图函数 html:访问"/"返回html,在html上面点击超链接时请求

测开之路九十五:css进阶之光标和溢出内容处理

光标样式:cursor 准备文字 css 溢出内容处理:overflow,默认溢出部分是显示 先把内容放到盒子里面 正常显示 不显示溢出内容 显示为滚动条 自动处理 css /* 光标样式 */p{ /* 默认default */ cursor: default; /*!*pointer:小手.*!*/ /*cursor: pointer;*/ /*!*text.*!*/ /*cursor: text;*/ /*!*移动样式move*!*/ /*cursor: move;*/} /* 溢出内容

测开之路一百零二:jquery元素操作

jquery对元素操作,获取/替换文本(.text()).html(.html()).属性(.attr()).值(.val()) html代码 text() 根据标签获取文本值 同一个标签下筛选明细 最后一个元素 第一个元素 替换文本 html 获取html 替换html <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>

测开之路一百零一:jquery文字特效、动画、方法链

文字特效 html内容 1.卷起/展开 2.隐藏/显示 3.淡入淡出 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--<script src="../js/jquery-3.4.1.min.js"></script>--&g

测开之路一百:jquery引用、语法、事件

工作中一般会使用jquery代替js,jquery官网:https://jquery.com/ 引用jquery: 第一种方式:下载引用: jquery下载官网:https://jquery.com/download/ 下载压缩版本:右键-链接另存为,保存到项目的js下 引用 第二种方式:CDN引入:https://www.bootcdn.cn/jquery/ 为了稳定,使用2.2.4版本,直接复制标签到script标签下 jquery语法:$("选择器").事件(函数); 准备htm

测开之路一百零四:jquery操作样式

jquery操作样式 添加样式.删除样式 切换样式 css("属性","值") css("属性","值"), 修改多个 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script src="h