网站改造 Python Flask Javascript 的搭配使用

本文介绍了如何在网站改造中利用Python Flask后端和JavaScript前端进行交互，以实现不切换页面的内容刷新和菜单导航功能。通过编写JS脚本，实现了NBA球队图标点击后，下方图片和描述动态切换，同时强调了onclick事件处理中的返回值对于阻止页面跳转的重要性。文章以实际代码示例展示了页面结构和JS脚本结构，并提供了最终效果的展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网站好久没更新了，最近在考虑一些前后端交互方面的问题，首先感觉如果单纯用Flask搭配Bootstrap的话，前段和后端的联系过于紧耦合了，前端部分得不到很好的锻炼。

所以想着自己开设一个子版块，通过手动写JS脚本，来实现几个目标

1：菜单导航栏的实现

2：在不切换页面的情况下实现内容的刷新

3：前段向后端取数据

其实第2，3部分就和ajax有关了。尤其是第3部分，还要涉及到后端提供API的情况。

菜单导航栏准备最后做，先实现最简单的部分，也就是第2部分，不切换页面的情况下，实现内容的刷新。

平时喜欢看球，所以就拿NBA的事情来做个页面。下面的是最后的效果图的主页面。

Ok,进入正题.

页面结构

首先要把页面的框架搭好，最上面的简单导航栏就不说了

主页面内，我先放了一个NBA的图标单独一行，在他下面的一行，并行排布了5个具体队伍的队标，使用的方式是 <ul>列表的方式

页面的代码如下设置

<!DOCTYPE html>
<html lang="en">
<head>
    {% block head %}
    <meta charset="UTF-8">
    <title>{% block title %}欢迎来到新版块{% endblock %}</title>
    <link href="{
  
  {url_for('static',filename='base.css')}}" rel="stylesheet" type="text/css"/>
    {% endblock %}
</head>

<body>

{%block navi_bar%}
<ul class = "navi_bar">
    <li class = "navi_list_item"><a href = "{
  
  {url_for('main.index')}}">主页</a></li>
    <li class = "navi_list_item"><a href = "{
  
  {url_for('newland.homepage')}}">区域主页</a></li><br