嘿，我正在完成我的小应用程序，这是一个销售活动门票的在线平台。当用户离开页面时，我目前遇到了一些问题。我想去掉他已经提交的数据。当活动的发起人想要创建一个聚会时，就会发生这种情况，有两个"；阶段"；活动信息和门票信息。我用javascript处理这个问题；beforeunload"；但我坚持了下来。有人能给我一个提示吗？顺便说一下，谢谢你们。
我没有特别的错误，我只是想在用户离开后删除未完成的帖子。
路由
@app.route("/post/new",methods=["GET","POST"])
@login_required
def new_post():
#event forms
post_form=PostForm()
#valdiating the submission of those forms
if post_form.validate_on_submit():
if post_form.image_file.data:
picture_file=save_picture(post_form.image_file.data)
#loading to our database
post=Post(title=post_form.title.data,content=post_form.content.data,start_dh=post_form.start_dh.data,
finish_dh=post_form.finish_dh.data,image_file=picture_file,author=current_user)
db.session.add(post)
db.session.commit()
flash("create your tickets now", "success")
return redirect(url_for("tickets", post_id=post.id))
return render_template("create_post.html",title="new post",post_form=post_form,legend="New Event")
#create new tickets
@app.route("/ticket/<int:post_id>",methods=["GET","POST"])
@login_required
def tickets(post_id):
post=Post.query.get_or_404(post_id)
ticket_form=TicketForm()
#this variable give us the id of the last post that this user posted
post_relation=Post.query.filter_by(user_id=current_user.id).order_by(Post.date_posted.desc()).first()
#submission
if ticket_form.validate_on_submit():
tickets=Tickets(ticket_type=ticket_form.ticket_type.data,ticket_quantity=ticket_form.ticket_quantity.data,
price_ticket=ticket_form.price_ticket.data, start_dh_tickets=ticket_form.start_dh_tickets.data,
finish_dh_tickets=ticket_form.finish_dh_tickets.data,event=post_relation)
db.session.add(tickets)
db.session.commit()
flash("your tickets have been created","success")
return redirect(url_for("tickets",post_id=post.id))
tick=Tickets.query.order_by(Tickets.post_id)
return render_template("create_ticket.html",title="tickets",ticket_form=ticket_form,tick=tick,post_id=post.id)
html/javascript
创建票据前端
<div class="content-section">
<form method="POST" action="" onsubmit="setFormSubmitting()">
{{ticket_form.hidden_tag()}}
<fieldset class="form-group">
<div class="form-group">
{{ticket_form.ticket_quantity.label(class="form-control-label")}}
{% if ticket_form.ticket_quantity.errors %}
{{ticket_form.ticket_quantity(class="form-control form-control-lg is-invalid")}}
<div class="invalid-feedback">
{% for error in form.ticket_quantity.errors %}
<span> {{error}}</span>
{% endfor %}
</div>
{% else %}
{{ ticket_form.ticket_quantity(class="form-control-label") }}
{% endif %}
</div>
<div class="form-group">
{{ticket_form.ticket_type.label(class="form-control-label")}}
{% if ticket_form.ticket_type.errors %}
{{ticket_form.ticket_type(class="form-control form-control-lg is-invalid")}}
<div class="invalid-feedback">
{% for error in ticket_form.ticket_type.errors %}
<span> {{error}} </span>
{% endfor %}
</div>
{% else %}
{{ ticket_form.ticket_type(class="form-control-label")}}
{% endif %}
</div>
<div class="form-group">
{{ticket_form.price_ticket.label(class="form-control-label")}}
{% if ticket_form.price_ticket.errors %}
{{ticket_form.price_ticket(class="form-control form-control-lg is-invalid")}}
<div class="invalid-feedback">
{% for error in ticket_form.price_ticket.errors %}
<span> {{error}} </span>
{% endfor %}
</div>
{% else %}
{{ ticket_form.price_ticket(class="form-control-label")}}
{% endif %}
</div>
<div class="form-group">
{{ticket_form.start_dh_tickets.label(class="form-control-label")}}
{% if ticket_form.start_dh_tickets.errors %}
{{ticket_form.start_dh_tickets(class="form-control form-control-lg is-invalid")}}
<div class="invalid-feedback">
{% for error in ticket_form.start_dh_tickets.errors %}
<span> {{error}} </span>
{% endfor %}
</div>
{% else %}
{{ ticket_form.start_dh_tickets(class="form-control-label")}}
{% endif %}
</div>
<div class="form-group">
{{ticket_form.finish_dh_tickets.label(class="form-control-label")}}
{% if ticket_form.finish_dh_tickets.errors %}
{{ticket_form.finish_dh_tickets(class="form-control form-control-lg is-invalid")}}
<div class="invalid-feedback">
{% for error in ticket_form.finish_dh_tickets.errors %}
<span> {{error}} </span>
{% endfor %}
</div>
{% else %}
{{ ticket_form.finish_dh_tickets(class="form-control-label")}}
{% endif %}
</div>
<div class="form-group">
{{ticket_form.submit_ticket(class="btn btn-primary")}}
</div>
</fieldset>
</form>
</div>
<script type="text/javascript">
var formSubmitting = false;
var postComplete= true;
var setFormSubmitting = function() { formSubmitting = true; };
var setPostComplete=function() { postComplete=false; };
window.onload = function() {
window.addEventListener("beforeunload", function (e) {
if (formSubmitting) {
return undefined;
}
var confirmationMessage = 'you want to leave? your data will be lost';
(e || window.event).returnValue = confirmationMessage; //Gecko + IE
return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
});
};
</script>
创建后前端
<div class="content-section">
<form method="POST" action="" enctype="multipart/form-data" onsubmit="setFormSubmitting()">
{{post_form.hidden_tag()}}
<fieldset class="form-group">
<legend class="border-bottom mb-4"> {{ legend }}</legend>
<div class="form-group">
{{post_form.title.label(class="form-control-label")}}
{% if post_form.title.errors %}
{{post_form.title(class="form-control form-control-lg is-invalid")}}
<div class="invalid-feedback">
{% for error in post_form.title.errors %}
<span> {{error}}</span>
{% endfor %}
</div>
{% else %}
{{ post_form.title(class="form-control-label")}}
{% endif %}
</div>
<div class="form-group">
{{post_form.content.label(class="form-control-label")}}
{% if post_form.content.errors %}
{{post_form.content(class="form-control form-control-lg is-invalid")}}
<div class="invalid-feedback">
{% for error in post_form.content.errors %}
<span> {{error}} </span>
{% endfor %}
</div>
{% else %}
{{ post_form.content(class="form-control-label")}}
{% endif %}
</div>
<!-- section for setting the date and hour of the event-->
<!-- starting date hour-->
<div class="form-group">
{{post_form.start_dh.label(class="form-control-label")}}
{% if post_form.start_dh.errors %}
{{post_form.start_dh(class="form-control form-control-lg is-invalid")}}
<div class="invalid-feedback">
{% for error in post_form.start_dh.errors %}
<span> {{error}}</span>
{% endfor %}
</div>
{% else %}
{{ post_form.start_dh(class="form-control-label")}}
{% endif %}
<!-- finish -->
<div class="form-group">
{{post_form.finish_dh.label(class="form-control-label")}}
{% if post_form.finish_dh.errors %}
{{post_form.finish_dh(class="form-control form-control-lg is-invalid")}}
<div class="invalid-feedback">
{% for error in post_form.finish_dh.errors %}
<span> {{error}} </span>
{% endfor %}
</div>
{% else %}
{{ post_form.finish_dh(class="form-control-label")}}
{% endif %}
</div>
<!-- image -->
<div class="form-group">
{{post_form.image_file.label()}}
{{post_form.image_file(class="form-control-file")}}
{% if post_form.image_file.errors %}
{% for error in post_form.image_file.errors %}
<span class="text-danger"> {{error}} </span></br>
{% endfor %}
{% endif %}
</div>
<div class="form-group">
{{post_form.submit_post(class="btn btn-primary")}}
</div>
</fieldset>
</form>
</div>
<script type="text/javascript">
var formSubmitting = false;
var setFormSubmitting = function() { formSubmitting = true; };
window.onload = function() {
window.addEventListener("beforeunload", function (e) {
if (formSubmitting) {
return undefined;
}
var confirmationMessage = 'It looks like you have been editing something. '
+ 'If you leave before saving, your changes will be lost.';
(e || window.event).returnValue = confirmationMessage; //Gecko + IE
return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
});
};
</script>
数据库
class Post(db.Model):
#unique id for the user
id= db.Column(db.Integer, primary_key=True)
#name of the event
title= db.Column(db.String(100), nullable=False)
#when the event was posted
date_posted= db.Column(db.DateTime, nullable=False, default=datetime.now())
#description of the event
content= db.Column(db.Text, nullable=False)
#start date and hour of the event
start_dh= db.Column(db.DateTime, nullable=False)
#finish date and hour of the event
finish_dh= db.Column(db.DateTime, nullable=False)
#image of the flyer for the post
image_file= db.Column(db.String(20), nullable=False, default="default.jpg")
#linking the post table with the user
user_id= db.Column(db.Integer, db.ForeignKey("user.id"), nullable=False)
#relation with the ticket model
ticket=db.relationship("Tickets", backref="event", lazy=True)
#relation ship with the customer
customer=db.relationship("Customer", backref="party", lazy=True)
#this is a method that declares how our class is going to be printed out
def __repr__(self):
return "%s,%s,%s,%s,%s" % (self.user_id,self.title,self.date_posted,self.content,self.image_file)
#data base for the tickets
class Tickets(db.Model):
#unique id for the user
id= db.Column(db.Integer, primary_key=True)
#name or kind of the event, this is set by the creators
ticket_type=db.Column(db.String(20), nullable=False)
#initial stock of the ticket
ticket_quantity=db.Column(db.Integer,nullable=False)
#initial price of this kind of ticket
price_ticket=db.Column(db.Integer, nullable=False)
#start date and hour of the event
start_dh_tickets=db.Column(db.DateTime, nullable=False)
#finish date and hour of the event
finish_dh_tickets=db.Column(db.DateTime, nullable=False)
#id of the event we have a relationship with
post_id= db.Column(db.Integer, db.ForeignKey("post.id"), nullable=False)
#this is a method that declares how our class is going to be printed out
def __repr__(self):
return "%s,%s,%s,%s,%s,%s" % (self.post_id,self.ticket_type, self.ticket_quantity,self.price_ticket,self.start_dh_tickets,self.finish_dh_tickets)
您可以在JavaScript:中从浏览器向用户使用警告消息
window.onbeforeunload = function(){
return 'Are you sure you want to leave?';
};
或者，您可以在用户更改输入后立即将数据发送到Flask服务器，单击按钮后，您可以正式进行这些操作。