#javascript #python #json #flask
Вопрос:
Я новичок в Flask и хотел бы предоставить приложению (работающему на базе flask) некоторый ввод с помощью вкладки, записать ввод в файл json и сохранить его локально, нажав кнопку. Есть ли способ без базы данных, может быть, просто с помощью javascript?
Как должна выглядеть таблица: Это должна быть динамическая таблица, как при загрузке страницы 3 пустые строки с предопределенными значениями (например, «имя» и «возраст»), а затем вы можете ввести некоторые значения. Если вам нужно 5 строк, для добавления новой строки должна быть кнопка «добавить строку», и в каждой строке должна быть кнопка «удалить строку».
Пример, что я имею в виду (особенно № 4-это бросить хорошо)
минимальный пример (в основном просто привет, мир в колбе)
main.py
from flask import Flask, render_template
from flask import url_for
app = Flask(__name__)
@app.route('/')
def load_index():
return render_template('main.html')
if __name__ == '__main__':
app.run(debug = True)
main.html
<!doctype html>
<html>
<body>
*tabel here*
</body>
</html>
К сожалению, большинство учебников, которые я нашел, просто тематизируют, как отображать базу данных данных из существующей базы данных или фрейм данных pd…
Я надеюсь, что кто-то здесь знает решение моей проблемы или имеет подсказку. Спасибо!
Ответ №1:
Да, вы можете заархивировать это с помощью javascript. Просто введите идентификатор формы ввода и таблицы, возьмите данные из формы и отредактируйте таблицу. что вам нужно узнать, так это как получать данные из формы. для этого вы можете использовать объект FormData
var myForm = document.getElementById('myForm');
formData = new FormData(myForm);
вы можете узнать больше об этом здесь: https://developer.mozilla.org/docs/Web/API/FormData/FormData
что касается таблицы, вы, вероятно, захотите использовать insertRow и insertCell:
// Find a <table> element with id="myTable":
var table = document.getElementById("myTable");
// Create an empty <tr> element and add it to the 1st position of the table:
var row = table.insertRow(0);
// Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
// Add some text to the new cells:
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
вы можете узнать больше об этой теме здесь: https://www.w3schools.com/jsref/met_table_insertrow.asp