4.Python-用Python,Ajax实现MySQL数据库的新增数据

题记 

        用python,ajax实现mysql数据库的新增数据。以下是一个简单的实例和操作过程。

安装flask模块 

        pip install flask 

安装mysql.connector模块

         pip install mysql-connector-python 

编写app.py文件 

        app.py文件如下: 

  块引用可能显示不完整,下面附加了全部代码

from flask import Flask, request, render_template
import mysql.connectorapp = Flask(__name__)# 连接到MySQL数据库
db = mysql.connector.connect(host="localhost",user="root",password="123456",database="test"
)# 创建游标对象
cursor = db.cursor()# 创建表格(如果不存在)
cursor.execute("CREATE TABLE IF NOT EXISTS students (id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(255), age INT)")@app.route('/')
def index():return render_template('index111.html')@app.route('/add', methods=['POST'])
def add():name = request.form['name']age = request.form['age']# 向数据库插入数据sql = "INSERT INTO students (name, age) VALUES (%s, %s)"values = (name, age)cursor.execute(sql, values)db.commit()return "数据已成功添加到数据库!"if __name__ == '__main__':app.run()
from flask import Flask, request, render_template
import mysql.connectorapp = Flask(__name__)# 连接到MySQL数据库
db = mysql.connector.connect(host="localhost",user="root",password="123456",database="test"
)# 创建游标对象
cursor = db.cursor()# 创建表格(如果不存在)
cursor.execute("CREATE TABLE IF NOT EXISTS students (id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(255), age INT)")@app.route('/')
def index():return render_template('index.html')@app.route('/add', methods=['POST'])
def add():name = request.form['name']age = request.form['age']# 向数据库插入数据sql = "INSERT INTO students (name, age) VALUES (%s, %s)"values = (name, age)cursor.execute(sql, values)db.commit()return "数据已成功添加到数据库!"if __name__ == '__main__':app.run()

编写index.html文件 

        注意:index.html需要放在templates文件夹下,否则服务器会找不到文件 

        index.html文件如下: 

<!DOCTYPE html>
<html>
<head><title>Add Student</title>
<!--引用jquery-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body><!--创建表单id--><form id="updateForm"><label for="name">姓名:</label><input type="text" id="name" name="name"><br><br><label for="age">年龄:</label><input type="text" id="age" name="age"><br><br><input type="submit" value="Add"></form><script>// 使用jQuery库来处理表单的提交行为,并使用Ajax方式将表单数据发送到服务器进行处理// $ 是一个函数名(或别名)// 它相当于原生js中的 document.querySelector 或 document.querySelectorAll 选择器方法。// $(document).ready()方法,它会在文档加载完成后执行其中的代码$(document).ready(function() {// $("#updateForm").submit(function(event) { ... });// 这是通过选择器选中id为"updateForm"的表单元素,并使用.submit()方法来监听表单的提交事件。// 当表单提交时,会执行其中的回调函数。$("#updateForm").submit(function(event) {event.preventDefault(); // 阻止表单默认提交行为,从而避免页面刷新。//通过选择器选中id为"name"和"age"的输入框元素,并使用.val()方法获取输入框的值。var name = $("#name").val();var age = $("#age").val();//$.ajax({ ... });// 使用jQuery的.ajax()方法来发送Ajax请求。在其中设置了请求的URL、HTTP方法和数据$.ajax({url: "/add",method: "POST",data: { name: name, age: age },// success: function(response) { ... }// 这是在Ajax请求成功后的回调函数success: function(response) {// 在这里处理Ajax响应console.log(response);}});});});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head><title>Add Student</title>
<!--引用jquery-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body><!--创建表单id--><form id="updateForm"><label for="name">姓名:</label><input type="text" id="name" name="name"><br><br><label for="age">年龄:</label><input type="text" id="age" name="age"><br><br><input type="submit" value="Add"></form><script>// 使用jQuery库来处理表单的提交行为,并使用Ajax方式将表单数据发送到服务器进行处理// $ 是一个函数名(或别名)// 它相当于原生js中的 document.querySelector 或 document.querySelectorAll 选择器方法。// $(document).ready()方法,它会在文档加载完成后执行其中的代码$(document).ready(function() {// $("#updateForm").submit(function(event) { ... });// 这是通过选择器选中id为"updateForm"的表单元素,并使用.submit()方法来监听表单的提交事件。// 当表单提交时,会执行其中的回调函数。$("#updateForm").submit(function(event) {event.preventDefault(); // 阻止表单默认提交行为,从而避免页面刷新。//通过选择器选中id为"name"和"age"的输入框元素,并使用.val()方法获取输入框的值。var name = $("#name").val();var age = $("#age").val();//$.ajax({ ... });// 使用jQuery的.ajax()方法来发送Ajax请求。在其中设置了请求的URL、HTTP方法和数据$.ajax({url: "/add",method: "POST",data: { name: name, age: age },// success: function(response) { ... }// 这是在Ajax请求成功后的回调函数success: function(response) {// 在这里处理Ajax响应console.log(response);}});});});
</script>
</body>
</html>

 执行程序

        启动命令:

        python app.py 

        访问地址:

        localhost:5000 

展示图 

后记 

         觉得有用可以收藏或点赞!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/160335.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第15章 SpringBoot

所有的流程逻辑原理都是针对2.3.2.RELEASE版本 15.1 谈谈你对微服务架构演进的理解 难度:★ 重点:★ 白话解析 还是串主线,在串主线的过程中发现问题,解决问题。主线的入口:随着业务的逻辑越来越复杂,架构再不断升级演进,先理解架构的演进。 这道题参考了:企业IT架构转…

kantts docker化

kan-tts docker本地化 环境安装 下载docker镜像(python3.8的) registry.cn-hangzhou.aliyuncs.com/modelscope-repo/modelscope:ubuntu20.04-cuda11.8.0-py38-torch2.0.1-tf2.13.0-1.9.2 安装基础模型 pip install modelscope 安装语音模型 pip install "modelscope…

系列八、Redis的事务

一、是什么 可以一次执行多个命令&#xff0c;本质是一组命令的集合。一个事务中的所有命令都会序列化&#xff0c;按顺序地串行化执行而不会被其他命令插入&#xff0c;不允许加塞。 二、能干嘛 一个队列中&#xff0c;一次性、顺序性、排他性的执行一些列命令。 三、怎么玩…

git本地仓库及远端仓库推送【linux】

git本地仓库及远端仓库推送【linux】 一.git上创建仓库二.linux中git三板斧i.检查是否安装gitii.克隆仓库到本地iii.提交到本地仓库iiii.上传到远端仓库 三.其他内容补充git loggit status.gitignore 一.git上创建仓库 已经创建好的可以直接跳到第二步进入到创建仓库界面&…

SpringBoot + 自定义注解 + AOP 高级玩法打造通用开关

前言 最近在工作中迁移代码的时候发现了以前自己写的一个通用开关实现&#xff0c;发现挺不错&#xff0c;特地拿出来分享给大家。 为了有良好的演示效果&#xff0c;我特地重新建了一个项目&#xff0c;把核心代码提炼出来加上了更多注释说明&#xff0c;希望xdm喜欢。 案例 …

SQL注入漏洞

0x01 漏洞介绍 泛微e-office系统是标准、易用、快速部署上线的专业协同OA软件&#xff0c;国内协同OA办公领域领导品牌&#xff0c;致力于为企业用户提供专业OA办公系统、移动OA应用等协同OA整体解决方案。泛微e-office深谙改革之道以迎变革之机&#xff0c;沉心产品研发数十载…

电子笔记真的好用吗?手机上适合记录学习笔记的工具

提及笔记&#xff0c;不少人都会和学习挂钩&#xff0c;的确学习过程中我们经常会遇到很多难题&#xff0c;而经常记录笔记可以有效地帮助大家记住很多知识&#xff0c;而且时常拿出笔记查看一下&#xff0c;可方便巩固过去学习的知识。 手机作为大家日常随身携带的工具&#…

Matlab进阶绘图第31期—桑基图(Sankey Chart)

桑基图&#xff08;Sankey Chart&#xff09;本质为一种流程图&#xff0c;可以很好地展示数据的层次结构以及流量变化。 桑基图主要由节点块与流动路径线组成。 其中&#xff0c;节点块用于表示类别&#xff1b;流动路径线除了可以直观地表示流动的方向&#xff0c;其宽度还…

【EI会议征稿】第九届能源资源与环境工程研究进展国际学术会议(ICAESEE 2023)

第九届能源资源与环境工程研究进展国际学术会议&#xff08;ICAESEE 2023&#xff09; 2023 9th International Conference on Advances in Energy Resources and Environment Engineering 第九届能源资源与环境工程研究进展国际学术会议&#xff08;ICAESEE 2023&#xff09;…

补体C3/C4(C3/C4)介绍

补体是一种血清蛋白质&#xff0c;存在于人和脊椎动物血清及组织液中&#xff0c;不耐热&#xff0c;活化后具有酶活性、可介导免疫应答和炎症反应。可被抗原-抗体复合物或微生物所激活&#xff0c;导致病原微生物裂解或被吞噬。可通过三条既独立又交叉的途径被激活&#xff0c…

【MATLAB源码-第48期】基于matlab的16QAM信号盲解调仿真。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 16QAM (16个象限幅度调制) 是一种广泛使用的数字调制技术。在无线和有线通信系统中&#xff0c;为了在固定的带宽内发送更多的信息&#xff0c;高阶调制如16QAM被使用。下面是16QAM盲解调的基本步骤、优缺点及应用场景。 16Q…

从零开始学习调用百度地图网页API:一、注册百度地图账号

目录 注册账号申请AK 注册账号 https://lbsyun.baidu.com/index.php?titlejspopular3.0/guide/getkey JavaScript API只支持浏览器类型的ak 申请AK 注&#xff1a;使用示例时&#xff0c;需要在百度地图示例加上https:&#xff0c;替换ak。

蓝桥杯——递增序列和货物摆放

文章目录 前言一、递增序列二、货物摆放总结 前言 多多练习 一、递增序列 解题思路&#xff1a; 代码实现&#xff1a; 当然我的这个代码也不是很正确 发这道题就是向大家集思广益&#xff0c;我的就只作为一个参考啦~ #include <stdio.h> #include <stdlib.h>…

提升医疗服务质量:将互联网医院源码应用于实践

随着科技的快速发展&#xff0c;医疗行业也亟需寻求创新的解决方案来提升服务质量。在这个数字化时代&#xff0c;互联网医院源码成为了引人注目的选择&#xff0c;为医疗机构和患者之间的沟通和协作提供了前所未有的便利。作为该领域的专家&#xff0c;我将介绍互联网医院源码…

Linux:Termius连接本地虚拟机与虚拟机快照

Termius连接本地虚拟机与虚拟机快照 1. Termius连接本地虚拟机2. 虚拟机快照与还原2.1 设置快照以及恢复 附录 1. Termius连接本地虚拟机 ifconfig -a 查看配置 连接成功 2. 虚拟机快照与还原 在学习阶段我们无法避免的可能损坏Linux操作系统。 如果损坏的话&#xff0c;重新…

【(数据结构)- 顺序表的实现】

顺序表的实现 一.数据结构的相关概念1、什么是数据结构2、为什么需要数据结构&#xff1f; 二.顺序表1.顺序表的概念及结构1.1 线性表 2、顺序表分类3、动态顺序表的实现&#xff08;1&#xff09;头文件 —— &#xff08;顺序结构的创建和相关操作函数的定义&#xff09;(2) …

DCDC Buck电路地弹造成的影响

很多读者都应该听过地弹&#xff0c;但是实际遇到的地弹的问题应该很少。本案例就是一个地弹现象导致电源芯片工作不正常的案例。 問題描述 如下图1 &#xff0c;产品其中一个供电是12V转3.3V的电路&#xff0c;产品发货50K左右以后&#xff0c;大约有1%的产品无法启动&#…

图解Dubbo,Dubbo 服务治理详解

目录 一、介绍1、介绍 Dubbo 服务治理的基本概念和重要性2、阐述 Dubbo 服务治理的实现方式和应用场景 二、Dubbo 服务治理的原理1、Dubbo 服务治理的架构设计2、Dubbo 服务治理的注册与发现机制3、Dubbo 服务治理的负载均衡算法 三、Dubbo 服务治理的实现方式1、基于 Docker 容…

基于Vue+webpack之H5打包资源优化

前言 基于公司的业务以及今年接触到的项目大部分都是APP混合开发&#xff0c;即原生Android/ios H5页面开发APP。项目从产品需求的评审到方案的评审再到开发提测...这一套流程下来让我收货颇多。总想找个时间好好记录一番&#xff0c;大概还是自己懒惰了&#xff0c;一直拖到现…

【OpenCV-PyQt5-PyGame-imutils】探索Python中的图像和视频捕获:性能分析与选择指南

前言 随着计算机视觉和多媒体应用的不断发展&#xff0c;图像和视频捕获变得越来越重要。在Python中&#xff0c;有多种库和工具可供选择&#xff0c;用于打开摄像头、捕获图像、以及处理视频流。本文旨在为读者提供对这些捕获方法的全面了解&#xff0c;并介绍如何计算平均帧…