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

【问题标题】：Don't reload webpage after flask ajax request烧瓶 ajax 请求后不要重新加载网页
【发布时间】：2018-02-01 02:11:30
【问题描述】：

我有这个 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
            });

        });
});

当按钮被点击时，这个flask函数就会运行。

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

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

【问题讨论】：

标签： javascript jquery python ajax flask

【解决方案1】：

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

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

【讨论】：

这是一个幸运的盲猜。