烧瓶-在消耗大量任务的情况下使用Ajax显示加载页面

时间:2019-01-12 23:13:43

标签: ajax flask jinja2

以下应用程序结构,其中一个...

  • 登录
  • 执行任务
  • 任务完成后将重定向到菜单

...工作正常,就像这样:

clients.py

@consumers_bp.route('/client', methods=['GET','POST'])
def consumer():  
    if request.method == 'POST':
        mail = request.form['email']
        client_name = request.form['name']
        streaming = request.form['streaming']
        username = request.form['username']
        if db.session.query(Consumer).filter_by(username=username).count() < 1:            
            # long task
            return redirect(url_for('menus.menu_client'))
        else
            # another long task             
            return redirect(url_for('menus.menu_client'))   
    return render_template('login.html')

menus.py

@menus_bp.route('/menu_client', methods=['GET'])
def menu_consumer():
    user = User.query.filter_by(restaurant='some').first()
    menu = user.menu
    user_items = [t['item_name'] for t in menu['items']]     
    return render_template('menu_client.html',
                            user_items=user_items)

login.html

<div class="login">
  <h1>Client Login</h1>
    <form action="/client" method="post">
      <input type="username" name="name" placeholder="Your Name" required="required" />
      <input type="email" name="email" placeholder="Email" required="required" />
        <input type="streaming" name="streaming" placeholder="Streaming" />
        <input type="password" name="username" placeholder="Username" />
        <button type="submit" name="submit_button" class="btn btn-primary btn-block btn-large">Login.</button>
    </form>
</div>

menu_consumer.html

      <li><a href="{{ url_for('dishes.client_dishes')}}">{{ dishes[0] }}</a></li>
       <li><a href="{{ url_for('dishes.client_dishes')}}">{{ dishes[1] }}</a></li>
  

但是,'/client'视图中的任务非常昂贵,我想在渲染menu_client.html之前在加载页面被使用时渲染它。

我试图将以下<script>包含在上面的menu_client.html模板中,如下所示:

上面的新操作将指向此新视图的地方:

loading.py

@loading_bp.route('/loading_client')
def loading_client():
    return render_template('loading_client.html',
                            form_data=request.form['name'])

在其模板内部使用ajax函数进行调用:

loading_client.html

<script>
    $.ajax({
        type: 'POST',
        url: '/menu_client',
        data: {
            form_data: '{{form_data}}',
        },
        success: function() {
            window.location.replace('/menu_client');
        }
      });
</script>
但是,

loading_client.html不会在我运行时加载。登录页面仍然挂起,直到加载menu_client.html

我想念什么?

0 个答案:

没有答案