Python 无法关闭Django中的flash消息_Python_Django

Python 无法关闭Django中的flash消息

python django

Python 无法关闭Django中的flash消息,python,django,Python,Django,我正在使用python和Django框架开发一个示例应用程序。在本文中，我使用取消[x]图标显示了flash消息，以使用index.html中的Django消息框架关闭消息，使用base.html作为（模板继承）问题：问题是虽然我能够在index.html中显示消息，但我无法取消它。下面是代码文件 base.html <!doctype html> <html lang="en"> <head> <!-- Require

我正在使用python和Django框架开发一个示例应用程序。在本文中，我使用取消[x]图标显示了flash消息，以使用index.html中的Django消息框架关闭消息，使用base.html作为（模板继承）
问题：问题是虽然我能够在index.html中显示消息，但我无法取消它。下面是代码文件
base.html

<!doctype html> <html lang="en"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <title>{% block title %}{% endblock title %} Harry Ice Creams</title> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">Harry Ice Creams</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="/">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="/about">About Us</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Services </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="/services">Ice Cream</a></li> <li><a class="dropdown-item" href="#">Waffle</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Shake</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="/contact">Contact Us</a> </li> </ul> <form class="d-flex"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> </div> </div> </nav> // -----------------------FLASH MESSAGE CODE BELOW----------------------------- {% if messages %} {% for message in messages %} <div class="alert alert-{{ message.tags }} alert-dismissible fade show my-0" role="alert"> {{ message }} <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> {% endfor %} {% endif %} </div> {% block body %}{% endblock body %}   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>   </body> </html>

{% extends 'base.html' %} {% block title %}Home{% endblock title %} {% block body %} <div class="container-fluid my-4 px-0"> <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel"> <ol class="carousel-indicators"> <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li> <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li> <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> {% comment %} <img src="https://source.unsplash.com/1600x600/?icecream" class="d-block w-100" alt="..."> {% endcomment %} <img src="/static/img/1.jfif" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Chocolate Cookie Dough</h5> <p>This is warm treat cookies ice cream - vanilla. It's the perfect mixture of two desserts that customers already love. </p> </div> </div> <div class="carousel-item"> {% comment %} <img src="https://source.unsplash.com/1600x600/?icecreams" class="d-block w-100" alt="..."> {% endcomment %} <img src="/static/img/2.jfif" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Moose Tracks</h5> <p>This fun treat has a lot of chunks! It's vanilla ice cream, peanut butter cups, and fudge. It's a new perspective for vanilla ice cream.</p> </div> </div> <div class="carousel-item"> {% comment %} <img src="https://source.unsplash.com/1600x600/?cakes" class="d-block w-100" alt="..."> {% endcomment %} <img src="/static/img/3.jfif" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Chocolate Frosted Doughnut</h5> <p>Covered with chocolate layer and sprinkles, this doughnut is definitely for chocolate lovers.</p> </div> </div> </div> <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </a> </div> </div> <div class="container my-3"> <h1 class="my-4 text-center">Select from our range of Ice Creams</h1> <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3"> <div class="col"> <div class="card shadow-sm"> <img src="/static/img/4.jfif" class="d-block w-100" alt="..." width="900" height="400"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> <div class="col"> <div class="card shadow-sm"> <img src="/static/img/5.jfif" class="d-block w-100" alt="..." width="900" height="400"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> <div class="col"> <div class="card shadow-sm"> <img src="/static/img/6.jfif" class="d-block w-100" alt="..." width="900" height="400"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> <div class="col"> <div class="card shadow-sm"> <img src="/static/img/7.jfif" class="d-block w-100" alt="..." width="900" height="400"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> <div class="col"> <div class="card shadow-sm"> <img src="/static/img/8.jfif" class="d-block w-100" alt="..." width="900" height="400"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> <div class="col"> <div class="card shadow-sm"> <img src="/static/img/9.jfif" class="d-block w-100" alt="..." width="900" height="400"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> <div class="col"> <div class="card shadow-sm"> <img src="/static/img/10.jfif" class="d-block w-100" alt="..." width="900" height="400"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> <div class="col"> <div class="card shadow-sm"> <img src="/static/img/11.jfif" class="d-block w-100" alt="..." width="900" height="400"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> <div class="col"> <div class="card shadow-sm"> <img src="/static/img/12.jfif" class="d-block w-100" alt="..." width="900" height="400"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> </div> </div> {% endblock body %}

有什么解决方案吗？
在代码中调用jQuery库

from django.shortcuts import render, HttpResponse from datetime import datetime from home.models import Contact from django.contrib import messages # Create your views here. def index(request): context = { 'variable': 'This is a TEST variable', 'name': 'MOHIT' } messages.success(request,'This is a test message') return render(request, 'index.html', context) def about(request): return render(request, 'about.html') def services(request): return render(request, 'services.html') def contact(request): if request.method == 'POST': name = request.POST.get('name') email = request.POST.get('email') phone = request.POST.get('phone') desc = request.POST.get('desc') contact = Contact(name=name, email=email, phone=phone, desc=desc, date=datetime.today()) contact.save() # -------------------SENDING FLASH MESSAGE------------------------ messages.success(request, 'Your message has been sent successfully.') return render(request, 'contact.html')