烧瓶ajax请求后不要重新加载网页

我有这个ajax请求

$(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 }); }); }); 

单击按钮时会运行此烧瓶function。

 @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" 

我遇到的问题是网页瞬间变为一秒，因为应该设置图像并显示按钮差异。 但之后网页重新加载并重置到索引页面。 我真的不知道如何防止这种情况发生。 我究竟做错了什么？

Answer 1

盲目猜测：您的button可能是表单的一部分，因此单击时的默认行为是提交表单并重新加载页面。 您可以使用event.preventDefault()来防止这种情况：

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