python عرض رسالة "تحميل" أثناء تنفيذ وظيفة تستغرق وقتًا طويلاً في القارورة



html flask (2)

يمكن القيام بذلك باستخدام div يحتوي على صورة "gif loading". عندما يتم النقر فوق الزر إرسال ، يتم عرض div باستخدام javascript. لتنفيذ هذا ، يمكنك إلقاء نظرة على هذا الموقع: http://www.netavatar.co.in/2011/05/31/how-to-show-a-loading-gif-image-while-a-page-loads-using-javascript-and-css/

ما زلت جديدًا نسبيًا بالنسبة إلى Flask ، وقليلاً من محتوى الويب بشكل عام ، لكني حققت بعض النتائج الجيدة حتى الآن. الآن لديّ نموذج يقوم فيه المستخدمون بإدخال استعلام ، والذي يتم إعطاؤه لوظيفة يمكن أن تستغرق ما بين 5 إلى 30 ثانية لإرجاع النتيجة (البحث عن البيانات باستخدام واجهة برمجة التطبيقات المجانية).

تكمن المشكلة في أنه لا يمكنني السماح للمستخدم بمعرفة أن طلب البحث يتم تحميله خلال هذا الوقت ، حيث يتم تحميل صفحة النتائج بمجرد انتهاء الوظيفة. هل هناك طريقة يمكنني من خلالها عرض رسالة تحميل أثناء حدوث ذلك؟ لقد عثرت على بعض ملفات جافا سكريبت التي يمكن أن تعرض رسالة تحميل بينما لا يزال يتم تحميل عناصر الصفحة ، لكن فترة الانتظار الخاصة بي تحدث قبل 'render_template'.

طرقت بعضًا من أمثلة التعليمات البرمجية ، فقط لإثبات موقفي:

الثعبان:

from flask import Flask
from flask import request
from flask import render_template
import time

app = Flask(__name__)

def long_load(typeback):
    time.sleep(5) #just simulating the waiting period
    return "You typed: %s" % typeback

@app.route('/')
def home():
    return render_template("index.html")

@app.route('/', methods=['POST'])
def form(display=None):
    query = request.form['anything']
    outcome = long_load(query)
    return render_template("done.html", display=outcome)

if __name__ == '__main__':
    #app.debug = True
    app.run()

مقتطف من index.html:

<body>
    <h3>Type anything:</h3>
    <p>
    <form action="." method="POST">
        <input type="text" name="anything" placeholder="Type anything here">
        <input type="submit" name="anything_submit" value="Submit">
    </form>
    </p>    
</body>

مقتطف من done.html:

<body>
    <h3>Results:</h3>
    <p>
        {{ display }}
    </p>
</body>

أي مساعدة سيكون موضع تقدير كبير ، وآمل أن يساعد هذا المثال.


Answer #1

أضف هذا إلى ملفك index.html أو js (أفترض أن لديك jQuery هنا ، يمكنك استخدام javascript القياسي بالطبع.):

<script type="text/javascript">// <![CDATA[
        function loading(){
            $("#loading").show();
            $("#content").hide();       
        }
// ]]></script>

أضف هذا الملف html أو css:

div#loading {
    width: 35px;
    height: 35px;
    display: none;
    background: url(/static/loadingimage.gif) no-repeat;
    cursor: wait;
    }

يمكنك الحصول على صورة GIF كافية من http://www.ajaxload.info/ . تحميل ووضعها في مجلد ثابت.

ثم قم بتغيير زر الإرسال الخاص بك لاستدعاء الوظيفة js أعلاه:

<input type="submit" name="anything_submit" value="Submit" onclick="loading();">

وأضف في قسم تحميل ومحتوى div إلى ملف html الأساسي:

<body>
    <div id="loading"></div>
    <div id="content">
        <h3>Type anything:</h3>
        <p>
        <form action="." method="POST">
            <input type="text" name="anything" placeholder="Type anything here">
            <input type="submit" name="anything_submit" value="Submit" onclick="loading();">
        </form>
        </p>
    </div>    
</body>

الآن عند النقر فوق "إرسال" ، يجب أن تخفي وظيفة js المحتوى الخاص بك وتعرض صورة GIF للتحميل. سيتم عرض هذا حتى يتم معالجة بياناتك وتحميل القارورة الصفحة الجديدة.





loading