从零开始用 Flask 搭建一个网站（三）

最新推荐文章于 2025-11-09 20:58:09 发布

原创

最新推荐文章于 2025-11-09 20:58:09 发布 · 2.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#数据库 #jquery #ajax #前端 #界面

本文延续前文，介绍如何在Flask中实现前端与后端交互，涉及jinja2模板、jQuery、ajax。通过创建界面展示和编辑channel与integration，展示数据在前后端间的传递。示例代码解释了ajax发送post请求，视图函数处理数据并返回，前端回调函数接收数据更新页面。最后预告将探讨flask_oauthlib和OAuth2第三方授权登录。

从零开始用 Flask 搭建一个网站（二）介绍了有关于数据库的运用，接下来我们在完善一下数据在前端以及前端到后端之间的交互。本节涉及到前端，因此也会讲解一下 jinja2 模板、jQuery、ajax 等用法。

下面我们来创建两个界面，一个可以新建 channel，并显示，另一个可以创建 integration，并且可以绑定一个之前创建的 channel。

post2channel.html

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block head %}    
{
   
   { super() }}    
<link rel="stylesheet" href="{
   
   { url_for('static', filename='css/post2channel.css') }}">    
<link rel="stylesheet" href="{
   
   { url_for('static', filename='css/toastr.css') }}">    
<script type="text/javascript" src="{
   
   { url_for('static', filename= 'js/jquery.min.js') }}"></script>    
<script type=