Bình: hiển thị một trang sau khi jQuery ajax $ .post gọi

Question

Tôi gửi dữ liệu từ một biểu mẫu với jQuery $ .post() đến một hàm bình. Hàm này thực hiện một số phép tính dài chạy dữ liệu. Trong trường hợp này, tôi không muốn gửi lại một số HTML mà đúng hơn là hiển thị một mẫu mới. Làm thế nào tôi có thể làm điều này khi tôi gọi hàm với jQuery/AJAX?

Hình thức:

<form id='myform'> 
    <input type='text'> some input... 
    <input type='button' value='send form' id='mybutton'> 
</form> 

Tính toán vào mẫu đầu vào mất một thời gian, vì vậy tôi gửi nó với jQuery:

$.("#mybutton").click(function() { 
    // get the data in form 
    $exampledata = 'foo' 
    $.post("/some/flask/function", {'data': $exampledata}, function(response) { 
     can I render a new template here with data from flask function? 
    }); 
}); 

Trong bình, chức năng tương ứng như sau:

@app.route('/some/flask/function', methods=['POST']) 
def longCalculation():   
    form = request.form 
    data = form['data'] 

    result = runTheLongCalculation(data) 
    this does not work --> 
    return render_template('result.html',r=result) 
    how can I render a new template after an jQuery/AJAX call? 

Tôi không muốn gửi lại URL chuyển hướng và JSON, nhưng thực sự hiển thị mẫu.

Answer 1

Nếu mẫu bạn làm chỉ đơn giản là một đoạn mã HTML, bạn có thể trả lại như bạn đã thấy trong mã Flask của bạn và làm như sau trong trình duyệt:

$.("#mybutton").click(function() { 
    // get the data in form 
    $exampledata = 'foo' 
    $.post("/some/flask/function", {'data': $exampledata}, function(response) { 
     var myDiv = $('#resultarea'); // The place where you want to inser the template 
     myDiv.html(response); 
    }); 
}); 

này hy vọng mẫu Flask của bạn để tìm một cái gì đó như thế này:

<div id='result'> 
    {{ result }} 
</div> 

Nó có thể lớn hơn, nhưng chúng tôi chèn nó bên trong trang để không có thanh bên, điều hướng menu hoặc thẻ html/body, chỉ là một đoạn HTML đơn giản.

Sự cố xảy ra nếu bạn gửi lại một trang HTML hoàn chỉnh với chức năng Flask của bạn, vì nó sẽ không được hiển thị chính xác bên trong trang hiện tại.

Answer 2

Sau khi thử rất nhiều cách để làm điều này:

Tôi nghĩ rằng phương pháp tốt nhất để gửi dữ liệu từ một chạy dài tính server-side đến một trang mới là sử dụng một số loại lưu trữ server-side. Bằng cách này, mọi thứ hoạt động ngay cả khi trình duyệt bị đóng hoặc người dùng rời khỏi trang web.

Tôi đi tìm lại vì nó chết đơn giản và nhanh chóng.