Laden Sie nicht, die Homepage nach Kolbe Ajax-Request

Question

Ich habe diesen Ajax-Request

$(function() { 
    $('#left').bind('click', function() { 
     var form = $('form#data')[0]; // 
     var formData = new FormData(form); 

     $.ajax({ 
      url: "{{ url_for('encode') }}", 
      type: 'POST', 
      data: formData, 
      async: false, 
      success: function (data) { 
       $("#img-2").attr("src", "{{url_for('static', filename='encoded.png')}}"); 
       $("#diff").show(); 
      }, 
      cache: false, 
      contentType: false, 
      processData: false 
      }); 

     }); 
}); 

Und diese Kolben-Funktion ausgeführt wird, wenn die Schaltfläche geklickt wird.

@app.route('/encode', methods=['GET', 'POST']) 
def encode(): 
    a = request.form['text'] 
    img = request.files['files'] 
    img.save("./static/original.png") 
    secret = lsb.hide(img, a) 
    secret.save("./static/encoded.png") 
    return "ok" 

Das Problem, das ich habe, ist, dass die Webseite zweite für den Bruchteil wird, wie es das Bild sein soll eingestellt ist und die Taste diff dargestellt ist. Danach wird die Webseite neu geladen und auf die Indexseite zurückgesetzt. Und ich weiß nicht wirklich, wie ich das verhindern kann. Was mache ich falsch?

Answer 1

Blind raten: Ihre button kann Teil eines Formulars sein, so ist das Standardverhalten, wenn Sie darauf klicken, das Formular zu senden und die Seite neu zu laden. Sie können dies unter Verwendung von event.preventDefault():

$('#left').bind('click', function(event) { 
    event.preventDefault() 
    ......