• 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()
    1. from flask import Flask, request, render_template
    2. import mysql.connector
    3.  
    4. app = Flask(__name__)
    5.  
    6. # 连接到MySQL数据库
    7. db = mysql.connector.connect(
    8.     host="localhost",
    9.     user="root",
    10.     password="123456",
    11.     database="test"
    12. )
    13.  
    14. # 创建游标对象
    15. cursor = db.cursor()
    16.  
    17. # 创建表格（如果不存在）
    18. cursor.execute("CREATE TABLE IF NOT EXISTS students (id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(255), age INT)")
    19.  
    20. @app.route('/')
    21. def index():
    22.     return render_template('index.html')
    23.  
    24. @app.route('/add', methods=['POST'])
    25. def add():
    26.     name = request.form['name']
    27.     age = request.form['age']
    28.  
    29.     # 向数据库插入数据
    30.     sql = "INSERT INTO students (name, age) VALUES (%s, %s)"
    31.     values = (name, age)
    32.     cursor.execute(sql, values)
    33.     db.commit()
    34.  
    35.     return "数据已成功添加到数据库！"
    36.  
    37. if __name__ == '__main__':
    38.     app.run()

    编写index.html文件 

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

            index.html文件如下： 

    


    Add Student




    
    
    
    
    

    
    
    

    
    
    
    




    1. html>
    2. <html>
    3. <head>
    4.     <title>Add Studenttitle>
    6. <script src="https://code.jquery.com/jquery-3.6.0.min.js">script>
    7. head>
    8. <body>
    9.     
    10.     <form id="updateForm">
    11.     <label for="name">姓名:label>
    12.     <input type="text" id="name" name="name"><br><br>
    13.     <label for="age">年龄:label>
    14.     <input type="text" id="age" name="age"><br><br>
    15.     <input type="submit" value="Add">
    16.     form>
    17.  
    18. <script>
    19.     // 使用jQuery库来处理表单的提交行为，并使用Ajax方式将表单数据发送到服务器进行处理
    20.     // $ 是一个函数名（或别名）
    21.     // 它相当于原生js中的 document.querySelector 或 document.querySelectorAll 选择器方法。
    22.     // $(document).ready()方法，它会在文档加载完成后执行其中的代码
    23.     $(document).ready(function() {
    24.         // $("#updateForm").submit(function(event) { ... });
    25.         // 这是通过选择器选中id为"updateForm"的表单元素，并使用.submit()方法来监听表单的提交事件。
    26.         // 当表单提交时，会执行其中的回调函数。
    27.         $("#updateForm").submit(function(event) {
    28.             event.preventDefault(); // 阻止表单默认提交行为，从而避免页面刷新。
    29.             //通过选择器选中id为"name"和"age"的输入框元素，并使用.val()方法获取输入框的值。
    30.             var name = $("#name").val();
    31.             var age = $("#age").val();
    32.             //$.ajax({ ... });
    33.             // 使用jQuery的.ajax()方法来发送Ajax请求。在其中设置了请求的URL、HTTP方法和数据
    34.             $.ajax({
    35.                 url: "/add",
    36.                 method: "POST",
    37.                 data: { name: name, age: age },
    38.                 // success: function(response) { ... }
    39.                 // 这是在Ajax请求成功后的回调函数
    40.                 success: function(response) {
    41.                     // 在这里处理Ajax响应
    42.                     console.log(response);
    43.                 }
    44.             });
    45.         });
    46.     });
    47. script>
    48. body>
    49. html>

     执行程序

            启动命令：

            python app.py 

            访问地址：

            localhost:5000 

    展示图 

    后记 

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

  • 相关阅读:
    Uniapp导出的iOS应用上架详解
    Spring Cloud框架学习-Spring Cloud Gateway
    VC++创建windows服务程序
    大企业HR透露：什么样的应聘者更易被青睐！
    计算机毕业设计之java+springboot基于vue的校友社交系统
    java-第一天（if循环）
    SSM基于WEB的房屋出租管理系统 毕业设计-附源码261620
    JS计算代码执行时间三大方法
    回归分析预测世界大学综合得分
    行业解密：为什么跨境电商行业都在做社交媒体营销？
  • 原文地址：https://blog.csdn.net/m0_70819559/article/details/133823529