Как отправить данные в Flask через AJAX JQuery? ⇐ Jquery
-
Гость
Как отправить данные в Flask через AJAX JQuery?
Как отправить данные во Flask через AJAX jQuery?
У меня есть форма, содержащая 3 ввода, которые мне нужны, когда я отправляю данные, сохраненные в бэкэнде и базе данных, поэтому, если пользователь обновляет данные, они сохраняются на странице, я пробовал много способов решить проблему, но не исправил ее.
Я использую JS jQuery во внешнем интерфейсе и серверная часть Flask Python и MySQL
Надеюсь решить мою проблему
"код здесь"
index.html
# Имя Отдел Телефон Действия 0
js-файл
// Отправляем данные на сервер через AJAX $.post( "/ajax_add", { txtname: textInput1, txtdepartment: textInput2, txtphone: NumberInput }, функция (данные) { $("#openModalButton").html(данные); $("#openModalButton").show(); } ); // скрипт отправляет данные на серверную часть $.post("/ajax_add", { txtname: txtname, txtdepartment: txtdepartment, txtphone: txtphone }, функция (данные) { $("#openModalButton").html(данные); $("#openModalButton").show(); } ); $(this).parents("tr").find(".error").first().focus(); если (!пусто) { input.each(функция () { $(this).parent("td").html($(this).val()); }); $(this).parents("tr").find(".add, .edit").toggle(); $(".add-new").removeAttr("отключено"); } }); // Удалить строку при нажатии кнопки удаления $(document).on("click", ".delete", function () { $(this).parents("tr").remove(); $(".add-new").removeAttr("отключено"); var id = $(this).attr("id"); вар строка = идентификатор; $.post("/ajax_delete", {строка: строка}, функция (данные) { $("#openModalButton").html(данные); $("#openModalButton").show(); }); }); // обновляем строку записи при нажатии кнопки редактирования $(document).on("click", ".update", function () { var id = $(this).attr("id"); вар строка = идентификатор; var txtname = $("#txtname").val(); var txtdepartment = $("#txtdepartment").val(); var txtphone = $("#txtphone").val(); $.post("/ajax_update", { строка: строка, txtname: txtname, txtdepartment: txtdepartment, txtphone: txtphone}, функция (данные) { $("#openModalButton").html(данные); $("openModalButton").show(); } ); }); app.py
# #app.py из фляги импорта Flask, render_template, перенаправление, запрос, flash, jsonify # из flask_mysqldb импорт MySQL,MySQLdb #pip install flask-mysqldb https://github.com/alexferl/flask-mysqldb из flask_mysqldb импортировать MySQL, MySQLdb #pip ins импортировать mysql.connector из flask_sqlalchemy импортировать SQLAlchemy # импортируем порталокер # lock =portalocker.RedisLock('some_lock_channel_name') # с замком: # print('сделайте что-нибудь здесь') приложение = Колба(__name__) app.secret_key = "caircocoders-ednalan" # Конфигурация базы данных app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://localhost:3306/jm' БД = SQLAlchemy (приложение) app.config['MYSQL_HOST'] = 'удален' app.config['MYSQL_USER'] = 'удален' app.config['MYSQL_PASSWORD'] = 'удален' app.config['MYSQL_DB'] = 'jm' app.config['MYSQL_CURSORCLASS'] = 'DictCursor' mysql = MySQL (приложение) #Создаем курсор подключения # курсор = mysql.connection.cursor() #Выполнение операторов SQL # курсор.execute(''' CREATE TABLE Name(field1, field2...) ''') # курсор.execute(''' INSERT INTO Department VALUES(v1,v2...) ''') # курсор.execute(''' УДАЛИТЬ С телефона ГДЕ условие ''') # #Сохранение действий, выполненных с БД # mysql.connection.commit() # #Закрытие курсора # курсор.закрыть() @app.route('/') индекс защиты(): cur = mysql.connection.cursor(MySQLdb.cursors.DictCursor) result = cur.execute("SELECT * FROM jm ORDER BY id") сотрудник = cur.fetchall() return render_template('index.html', сотрудник=сотрудник) @app.route("/ajax_add",methods=["POST","GET"]) защита ajax_add(): курсор = mysql.connection.cursor() cur = mysql.connection.cursor(MySQLdb.cursors.DictCursor) если запрос.метод == 'POST': txtname = request.form['txtname'] txtdepartment = request.form['txtdepartment'] txtphone = request.form['txtphone'] печать (имя файла) если txtname == '': msg = 'Пожалуйста, введите имя' элиф txtdepartment == '': msg = 'Пожалуйста, укажите отдел' элиф txtphone == '': msg = 'Пожалуйста, введите телефон' еще: cur.execute("ВСТАВИТЬ В jm_driver (имя,отдел,телефон) ЗНАЧЕНИЯ (%s,%s,%s)",[txtname,txtdepartment,txtphone]) mysql.connection.commit() кур.закрыть() msg = 'Новая запись успешно создана' вернуть jsonify (сообщение) @app.route("/ajax_update",methods=["POST","GET"]) защита ajax_update(): курсор = mysql.connection.cursor() cur = mysql.connection.cursor(MySQLdb.cursors.DictCursor) если запрос.метод == 'POST': строка = запрос.форма['строка'] txtname = request.form['txtname'] txtdepartment = request.form['txtdepartment'] txtphone = request.form['txtphone'] печать (строка) cur.execute("ОБНОВЛЕНИЕ jm SET name = %s, отдел = %s, телефон = %s WHERE id = %s ", [txtname, txtdepartment, txtphone, string]) mysql.connection.commit() кур.закрыть() msg = 'Запись успешно обновлена' вернуть jsonify (сообщение) @app.route("/ajax_delete",methods=["POST","GET"]) защита ajax_delete(): курсор = mysql.connection.cursor() cur = mysql.connection.cursor(MySQLdb.cursors.DictCursor) если запрос.метод == 'POST': getid = request.form['строка'] распечатать (получить) cur.execute('УДАЛЕНИЕ ИЗ jm WHERE id = {0}'.format(getid)) mysql.connection.commit() кур.закрыть() msg = 'Запись успешно удалена' вернуть jsonify (сообщение) если __name__ == "__main__": app.run(отладка=Истина)
Как отправить данные во Flask через AJAX jQuery?
У меня есть форма, содержащая 3 ввода, которые мне нужны, когда я отправляю данные, сохраненные в бэкэнде и базе данных, поэтому, если пользователь обновляет данные, они сохраняются на странице, я пробовал много способов решить проблему, но не исправил ее.
Я использую JS jQuery во внешнем интерфейсе и серверная часть Flask Python и MySQL
Надеюсь решить мою проблему
"код здесь"
index.html
# Имя Отдел Телефон Действия 0
js-файл
// Отправляем данные на сервер через AJAX $.post( "/ajax_add", { txtname: textInput1, txtdepartment: textInput2, txtphone: NumberInput }, функция (данные) { $("#openModalButton").html(данные); $("#openModalButton").show(); } ); // скрипт отправляет данные на серверную часть $.post("/ajax_add", { txtname: txtname, txtdepartment: txtdepartment, txtphone: txtphone }, функция (данные) { $("#openModalButton").html(данные); $("#openModalButton").show(); } ); $(this).parents("tr").find(".error").first().focus(); если (!пусто) { input.each(функция () { $(this).parent("td").html($(this).val()); }); $(this).parents("tr").find(".add, .edit").toggle(); $(".add-new").removeAttr("отключено"); } }); // Удалить строку при нажатии кнопки удаления $(document).on("click", ".delete", function () { $(this).parents("tr").remove(); $(".add-new").removeAttr("отключено"); var id = $(this).attr("id"); вар строка = идентификатор; $.post("/ajax_delete", {строка: строка}, функция (данные) { $("#openModalButton").html(данные); $("#openModalButton").show(); }); }); // обновляем строку записи при нажатии кнопки редактирования $(document).on("click", ".update", function () { var id = $(this).attr("id"); вар строка = идентификатор; var txtname = $("#txtname").val(); var txtdepartment = $("#txtdepartment").val(); var txtphone = $("#txtphone").val(); $.post("/ajax_update", { строка: строка, txtname: txtname, txtdepartment: txtdepartment, txtphone: txtphone}, функция (данные) { $("#openModalButton").html(данные); $("openModalButton").show(); } ); }); app.py
# #app.py из фляги импорта Flask, render_template, перенаправление, запрос, flash, jsonify # из flask_mysqldb импорт MySQL,MySQLdb #pip install flask-mysqldb https://github.com/alexferl/flask-mysqldb из flask_mysqldb импортировать MySQL, MySQLdb #pip ins импортировать mysql.connector из flask_sqlalchemy импортировать SQLAlchemy # импортируем порталокер # lock =portalocker.RedisLock('some_lock_channel_name') # с замком: # print('сделайте что-нибудь здесь') приложение = Колба(__name__) app.secret_key = "caircocoders-ednalan" # Конфигурация базы данных app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://localhost:3306/jm' БД = SQLAlchemy (приложение) app.config['MYSQL_HOST'] = 'удален' app.config['MYSQL_USER'] = 'удален' app.config['MYSQL_PASSWORD'] = 'удален' app.config['MYSQL_DB'] = 'jm' app.config['MYSQL_CURSORCLASS'] = 'DictCursor' mysql = MySQL (приложение) #Создаем курсор подключения # курсор = mysql.connection.cursor() #Выполнение операторов SQL # курсор.execute(''' CREATE TABLE Name(field1, field2...) ''') # курсор.execute(''' INSERT INTO Department VALUES(v1,v2...) ''') # курсор.execute(''' УДАЛИТЬ С телефона ГДЕ условие ''') # #Сохранение действий, выполненных с БД # mysql.connection.commit() # #Закрытие курсора # курсор.закрыть() @app.route('/') индекс защиты(): cur = mysql.connection.cursor(MySQLdb.cursors.DictCursor) result = cur.execute("SELECT * FROM jm ORDER BY id") сотрудник = cur.fetchall() return render_template('index.html', сотрудник=сотрудник) @app.route("/ajax_add",methods=["POST","GET"]) защита ajax_add(): курсор = mysql.connection.cursor() cur = mysql.connection.cursor(MySQLdb.cursors.DictCursor) если запрос.метод == 'POST': txtname = request.form['txtname'] txtdepartment = request.form['txtdepartment'] txtphone = request.form['txtphone'] печать (имя файла) если txtname == '': msg = 'Пожалуйста, введите имя' элиф txtdepartment == '': msg = 'Пожалуйста, укажите отдел' элиф txtphone == '': msg = 'Пожалуйста, введите телефон' еще: cur.execute("ВСТАВИТЬ В jm_driver (имя,отдел,телефон) ЗНАЧЕНИЯ (%s,%s,%s)",[txtname,txtdepartment,txtphone]) mysql.connection.commit() кур.закрыть() msg = 'Новая запись успешно создана' вернуть jsonify (сообщение) @app.route("/ajax_update",methods=["POST","GET"]) защита ajax_update(): курсор = mysql.connection.cursor() cur = mysql.connection.cursor(MySQLdb.cursors.DictCursor) если запрос.метод == 'POST': строка = запрос.форма['строка'] txtname = request.form['txtname'] txtdepartment = request.form['txtdepartment'] txtphone = request.form['txtphone'] печать (строка) cur.execute("ОБНОВЛЕНИЕ jm SET name = %s, отдел = %s, телефон = %s WHERE id = %s ", [txtname, txtdepartment, txtphone, string]) mysql.connection.commit() кур.закрыть() msg = 'Запись успешно обновлена' вернуть jsonify (сообщение) @app.route("/ajax_delete",methods=["POST","GET"]) защита ajax_delete(): курсор = mysql.connection.cursor() cur = mysql.connection.cursor(MySQLdb.cursors.DictCursor) если запрос.метод == 'POST': getid = request.form['строка'] распечатать (получить) cur.execute('УДАЛЕНИЕ ИЗ jm WHERE id = {0}'.format(getid)) mysql.connection.commit() кур.закрыть() msg = 'Запись успешно удалена' вернуть jsonify (сообщение) если __name__ == "__main__": app.run(отладка=Истина)
Мобильная версия