Python eel, JS, Html

Question

Я делаю графической интерфейс для программы на python с помощу eel. Как сделать так чтобы по нажатию на кнопку в html странице выводились данные указанные в python? Вот пример:

import eel
 
eel.init("web")
 
@eel.expose
def get_upp(place):
    text = "start"
 
    return text
 
eel.start('index.html', size=(700, 700))

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="eel.js"></script>
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <button id="btn" >Start</button>
        <div id="info" ></div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        
 
        async function display_upp() {
            let res = await ell.get_upp(place)();
            document.getElementById('info').innerHTML = res;
        }
        jQuery('#btn').on('click', function() {
            display_upp();
        });
 
    </script>
  
</body>
</html>

Мне нужно чтобы текст с пайтона выводился в тег по нажатию кнопки

Answer 1

Когда при выполнении кода открывается окно браузера, нажмите CTRL + SHIFT + I, чтобы открыть консоль, где можно поймать значительную часть ошибок JS.

https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js такой версии jQuery не существует, можно изменить, например, на 3.3.1
ell.get_upp(place)(); Во-первых eel, во-вторых, ReferenceError: place is not defined, переменная не объявлена. Нужно заранее дать ей необходимое значение.

test.py

import eel

eel.init("web")

@eel.expose
def get_upp(place):
    text = "start"

    return (text, place) # просто убедиться, что параметр тоже работает.

eel.start('index.html', size=(700, 700))

web/index.html (кусок JS тоже можно бы вынести в отдельный файл)

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="eel.js"></script>
  <title>Document</title>
</head>

<body>
  <div class="box">
    <button id="btn">Click Me!</button>
    <div id="info"></div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $('#btn').on('click', async function () {
      let place = prompt('Enter the place:', 'Russia');
      let res = await eel.get_upp(place)();

      $('#info').html(res);
    });
  </script>

</body>

</html>

* Дополнительно обращаю внимание читателя, не знакомого с eel: предполагается, что рядом с файлом test.py лежит папка web, внутри неё: index.html

pip install Eel

БЛОГ НА HUSL

Python eel, JS, Html

Ответы (1 шт):