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.connector

app = 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()
python 复制代码
from flask import Flask, request, render_template
import mysql.connector

app = 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>
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

展示图

后记

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

相关推荐
小白教程4 分钟前
Python连接MySQL数据库图文教程,Python连接数据库MySQL入门教程
数据库·python·mysql·python链接数据库·python链接mysql
weixin_307779134 分钟前
PySpark实现GROUP BY WITH CUBE和WITH ROLLUP的分类汇总功能
大数据·开发语言·python·spark
xing251621 分钟前
pytest-html
前端·html·pytest
Violet51532 分钟前
ECMAScript规范解读——this的判定
javascript
不太会写34 分钟前
基于Python+django+mysql旅游数据爬虫采集可视化分析推荐系统
python·推荐算法
呱牛do it1 小时前
Python Matplotlib图形美化指南
开发语言·python·matplotlib
pianmian11 小时前
python制图之小提琴图
开发语言·python·信息可视化
橙子小哥的代码世界1 小时前
【机器学习】【KMeans聚类分析实战】用户分群聚类详解——SSE、CH 指数、SC全解析,实战电信客户分群案例
人工智能·python·机器学习·kmeans·数据科学·聚类算法·肘部法
计算机徐师兄1 小时前
Python基于Flask的豆瓣Top250电影数据可视化分析与评分预测系统(附源码,技术说明)
python·flask·豆瓣top250电影数据可视化·豆瓣top250电影评分预测·豆瓣电影数据可视化分析系统·豆瓣电影评分预测系统·豆瓣电影数据
Themberfue1 小时前
SQL ①-数据库 || MySQL
数据库·sql·mysql·数据库系统·数据库管理系统