Python eel和javascript-不在JS函数调用中执行的python函数

Question

我的应用程序用于搜索俄语单词，它将检查MySql数据库中的单词，单词类别（名词，动词，形容词），并提取该单词的音频和图像。我正在使用python eel链接一些python代码，这些代码提取来自两个不同API的图像和音频，并最终将它们填充到HTML文件中（在python eel的帮助下充当程序的GUI）。

下面相关的HTML代码部分包含我用于单词搜索的表格。单击提交按钮后，将调用main.js中的getWord（）。在此main.js函数中，eel用于调用python函数。这些函数之一返回搜索词和单词类别，并应将它们插入id =“ word_searched”和“ word_category”的html标签中。

  <header class="masthead text-white text-center">
    <div class="overlay"></div>
    <div class="container">
      <div class="row">
        <div class="col-xl-9 mx-auto">
          <h1 class="mb-5">Find your word</h1>
        </div>
        <div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
          <form>
            <div class="form-row">
              <div class="col-12 col-md-9 mb-2 mb-md-0">
                <input type="text" class="form-control form-control-lg" id="form_word" placeholder="Слова здесь...">
              </div>
              <div class="col-12 col-md-3">
                <button type="submit" class="btn btn-block btn-lg btn-primary" onclick="getWord(); return false;">Search!</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </header>

  <!-- Icons Grid -->
  <section class="features-icons bg-light text-center">
    <div class="container">
      <div class="row">
        <div class="col-lg-4">
          <div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
            <div class="features-icons-icon d-flex">
              <i class="icon-screen-desktop m-auto text-primary"></i>
            </div>
            <h3 id="word_searched"></h3>
            <p class="lead mb-0" id="word_category"></p>
          </div>
        </div>
        </div>
      </div>
    </div>
  </section>

我的main.js文件具有以下代码。 eel在我的python脚本中使用属性装饰器将python函数get_data，get_pronounciation和get_image公开给JS端。我为两个HTML标记创建了一个事件侦听器，我想在其中插入get_data返回的结果。在提交按钮上单击，我正在调用getWord（），并且在html中此函数调用之后添加了return false，因为以前它是用我的返回值短暂填充html标签，但随后刷新后这些值将消失。这解决了问题，但是现在我的get_image和get_pronounciation函数没有运行。以前，当我在提交按钮中没有“ return false”时，它们运行得很好。有人可以向我解释为什么在onclick函数调用后添加“ return false”后，为什么eel.get_pronounciation（word）和eel.get_image（word）不再执行。如何在保持html更新的同时运行这两个python函数？

document.addEventListener("DOMContentLoaded", function(event) { 
    var word_searched = document.getElementById('word_searched');
    var category = document.getElementById('word_category');
    event.preventDefault()
});


function getWord(){
    word = String(document.getElementById("form_word").value);
    word = word.replace(/^\s+/g, '');
    //put the returned values into html elements
    eel.getData(word)(function(ret) {
        var word = ret[0];
        var category = ret[1];
        word_searched.textContent = word;
        word_category.textContent = category;
    });
    eel.get_pronounciation(word);
    eel.get_image(word)(function(ret){
        eel.image_download(ret);
    });
}

Answer 1

问题出在HTML中。需要使用一个简单的“按钮”而不是“提交”来刷新页面。我在onclick事件中的函数调用后删除了“ return false”，一切正常。