Ajax 如何使用jquery回调在flask应用程序中显示加载循环

当在

中单击提交按钮时，我试图触发加载页面。此时，加载循环继续到无穷大。我不知道如何让烧瓶路径在完成其过程时“关闭”加载屏幕。flask函数的结果是一个列表。我不熟悉ajax/jQuery，需要一些帮助。这就是我到目前为止所做的：

ajax

$(function() {
  $('submit-button').click(function() {
  const lockModal = $("#lock-modal");
  const loadingCircle = $("#loading-circle");
  const form = $("#form-subsrch");

   e.preventDefault(); //prevent form from submitting

    // lock down the form
    lockModal.css("display", "block");
    loadingCircle.css("display", "block");

   $.ajax({
      url:'/smrtsrch/',
      data: $('form-subsrch').serialize(),
      type:'POST',
      success: function(response) {
         console.log(response);
         lockModal.css('display','none');
         loadingCircle.css('display','none');
      },
      error: function(error){
         console.log(error);
         }
       });
    });
 });

烧瓶

@app.route('/smrtsrch/',methods=['POST'])
def smrtsrch():
    try:
        gc.collect()
        if request.method=='POST':
            query = request.form['smrtsrch']
            return render_template('dplysubsrch.html',svgoutput=smrtSrch(query),query=query)
    except Exception as e: 
        error = f'Problem child - ({e})'
        return render_template('dplysubsrch.html',svgoutput=error)

html

<form id='form-subsrch' method='post' action="{{ url_for('smrtsrch') }}" enctype='multipart/form-data'>
   <p>
   <br>
      <strong>SMARTS string: </strong>{{query}}
   </p>
   <textarea id='form-text' name="smrtsrch" cols="50" rows="5" required>cccccc=c</textarea> 
   <input id='form-text' class="submit-button" type ='submit'>
   <div id="lock-modal"></div>
   <div id="loading-circle"></div>

<div id="table-results">
   <!-- stuff to make table -->
</table>
</div>
</form>

---

尝试将jquery代码更改为：

$(function() {
    $('.submit-button').on('submit', function(e) {
        const lockModal = $("#lock-modal");
        const loadingCircle = $("#loading-circle");
        const form = $("#form-subsrch");

        e.preventDefault(); //prevent form from submitting

        // lock down the form
        lockModal.css("display", "block");
        loadingCircle.css("display", "block");

        $.ajax({
            url:'/smrtsrch/',
            data: form.serialize(),
            type:'POST',
            success: function(response) {
                // lockModal.css("display", "block");
                lockModal.parent().remove();
                // loadingCircle.css("display", "block");
                loadingCircle.parent().remove();
                console.log(response);
                $('#table-results').html(response);
            },
            error: function(error){
                alert(error);
            }
        });
    });
});

以及您的HTML地址：

<form id='form-subsrch' method='post' action="{{ url_for('smrtsrch') }}">
    <p>
        <strong>SMARTS string: </strong>{{query}}
    </p>
    <textarea id='form-text' name="smrtsrch" cols="50" rows="5" required>cccccc=c</textarea> 
    <input id='form-text' class="submit-button" type ='submit'>
</form>
<div id="lock-modal"></div>
<div id="loading-circle"></div>
<div id="table-results"></div>

SMARTS字符串：{{query}

CCCC=c

是指提交表单后浏览器控制台中显示的内容，如果是，您是否可以显示itright的屏幕截图？现在，它只显示带有加载圈的黑色屏幕。它不加载

。我不确定我是否为ajax调用编写了正确的代码行。按提交按钮后添加浏览器控制台的屏幕截图我添加了屏幕截图。加载循环趋于无穷大；控制台中似乎没有列出错误。我实现了

loadingCircle.css（'display'，'block'）

在

ajax

调用中；应该是“无”。不知怎的，它变了。但是，

仍不显示。它是否处理

数据

参数？没有jquery/ajax调用，该表就不会显示加载循环。现在，该表显示了加载循环，但由于某些原因，加载循环从未出现或消失。看起来好像我没有对加载循环进行ajax调用。@Spencetrinh加载循环从未出现或消失是什么意思？似乎没有呈现

和

。当我单击“提交”时，它只是默默地加载表格，没有显示加载循环。@Spencetrinh应该加载到

Hi@kellymandem中的图像在哪里，我正在使用CSS生成加载循环。我已经在上面添加了CSS。

<form id='form-subsrch' method='post' action="{{ url_for('smrtsrch') }}">
    <p>
        <strong>SMARTS string: </strong>{{query}}
    </p>
    <textarea id='form-text' name="smrtsrch" cols="50" rows="5" required>cccccc=c</textarea> 
    <input id='form-text' class="submit-button" type ='submit'>
</form>
<div id="lock-modal"></div>
<div id="loading-circle"></div>
<div id="table-results"></div>