• 5.Python-使用XMLHttpRequest对象来发送Ajax请求

    题记 

            使用XMLHttpRequest对象来发送Ajax请求，以下是一个简单的实例和操作过程。

    安装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('index111.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>
    5. head>
    6. <body>
    7.     <h1>新增学生h1>
    8.     <form id="updateForm">
    9.     <label for="name">姓名:label>
    10.     <input type="text" id="name" name="name"><br><br>
    11.     <label for="age">年龄:label>
    12.     <input type="text" id="age" name="age"><br><br>
    13.     
    14.     <input type="button" value="Add" onclick="submitForm()">
    15. form>
    16.  
    17. <script>
    18.     //这段代码是一个 JavaScript 函数 submitForm()，用于处理表单的提交操作
    19.     function submitForm() {
    20.         // 这两行代码使用原生 JavaScript 获取表单中输入框的值。
    21.         // 通过 getElementById() 方法选择具有相应 id 的元素，
    22.         // 并使用 .value 属性获取输入框的值，将其存储在相应的变量中。
    23.         var name = document.getElementById("name").value;
    24.         var age = document.getElementById("age").value;
    25.  
    26.         //创建一个 XMLHttpRequest 对象，用于发送 Ajax 请求。
    27.         var xhr = new XMLHttpRequest();
    28.         //设置 Ajax 请求的方法、URL 和异步标志。
    29.         // "POST" 表示使用 POST 方法发送请求，"/add" 是请求的目标 URL，true 表示使用异步方式发送请求。
    30.         xhr.open("POST", "/add", true);
    31.         //设置请求头的 Content-Type，指定请求的数据格式为 URL 编码形式。
    32.         xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    33.         //这是一个回调函数，用于处理 Ajax 请求的状态变化。
    34.         // 当readyState变为 4（表示请求已完成）且status为 200（表示请求成功）时，会执行其中的代码
    35.         xhr.onreadystatechange = function() {
    36.             if (xhr.readyState === 4 && xhr.status === 200) {
    37.                 // 在这里处理Ajax响应
    38.                 console.log(xhr.responseText); // 打印响应内容
    39.             }
    40.         };
    41.  
    42.         // 构建要发送的数据字符串
    43.         // 通过将姓名和年龄进行 URL 编码，并使用 + 连接符拼接成一个字符串。
    44.         var data = "name=" + encodeURIComponent(name) + "&age=" + encodeURIComponent(age);
    45.  
    46.         //发送 Ajax 请求，并将数据字符串作为请求的主体发送到服务器。
    47.         xhr.send(data);
    48.     }
    49. script>
    50. body>
    51. html>

     执行程序

            启动命令：

            python app.py 

            访问地址：

            localhost:5000 

    展示图 

    后记 

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

  • 相关阅读:
    ios获取原生系统应用的包
    《windows核心编程》第3章 内核对象
    脚踏实地，步步高升丨吴高升学长采访录
    Self-supervised Low Light Image Enhancement and Denoising 论文阅读笔记
    将json数据转换为Python字典
    【SQL引擎 - analyze.cpp分析(二)】
    SpringBoot如何进行限流，老鸟们还可以这样玩
    某大型国有银行 VMware 替换与轻量信创云底座转型实践 ｜信创专题
    DataTableResponseEntity
    FTX的前世今生：崛起、辉煌与崩塌
  • 原文地址：https://blog.csdn.net/m0_70819559/article/details/133823921