用户离开服务器后，我该如何处理表单？

Question

嘿，我正在完成我的小应用程序，这是一个销售活动门票的在线平台。当用户离开页面时，我目前遇到了一些问题。我想摆脱他已经提交的数据。当活动的发起人想要创建一个派对时，就会发生这种情况，有两个“阶段”活动信息和门票信息。我用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)

Answer 1

您可以在 JavaScript 中使用浏览器向用户发送警告消息：

window.onbeforeunload = function(){
  return 'Are you sure you want to leave?';
};

或者您可以在用户更改输入后立即将数据发送到 Flask 服务器，点击按钮后，您可以正式进行。