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.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('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()编写index.html
注意：index.html要放在templates文件夹下面
index.html文件如下：
<!DOCTYPE html> <html> <head><title>Add Student</title> </head> <body><h1>新增学生</h1><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><!--onclick 属性被设置为 "submitForm()"，表示当按钮被点击时，会执行 submitForm() 函数。--><input type="button" value="Add" οnclick="submitForm()"> </form><script>//这段代码是一个 JavaScript 函数 submitForm()，用于处理表单的提交操作function submitForm() {// 这两行代码使用原生 JavaScript 获取表单中输入框的值。// 通过 getElementById() 方法选择具有相应 id 的元素，// 并使用 .value 属性获取输入框的值，将其存储在相应的变量中。var name = document.getElementById("name").value;var age = document.getElementById("age").value;//创建一个 XMLHttpRequest 对象，用于发送 Ajax 请求。var xhr = new XMLHttpRequest();//设置 Ajax 请求的方法、URL 和异步标志。// "POST" 表示使用 POST 方法发送请求，"/add" 是请求的目标 URL，true 表示使用异步方式发送请求。xhr.open("POST", "/add", true);//设置请求头的 Content-Type，指定请求的数据格式为 URL 编码形式。xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//这是一个回调函数，用于处理 Ajax 请求的状态变化。// 当readyState变为 4（表示请求已完成）且status为 200（表示请求成功）时，会执行其中的代码xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {// 在这里处理Ajax响应console.log(xhr.responseText); // 打印响应内容}};// 构建要发送的数据字符串// 通过将姓名和年龄进行 URL 编码，并使用 + 连接符拼接成一个字符串。var data = "name=" + encodeURIComponent(name) + "&age=" + encodeURIComponent(age);//发送 Ajax 请求，并将数据字符串作为请求的主体发送到服务器。xhr.send(data);} </script> </body> </html>
<!DOCTYPE html>
<html>
<head><title>Add Student</title>
</head>
<body><h1>新增学生</h1><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><!--onclick 属性被设置为 "submitForm()"，表示当按钮被点击时，会执行 submitForm() 函数。--><input type="button" value="Add" onclick="submitForm()">
</form><script>//这段代码是一个 JavaScript 函数 submitForm()，用于处理表单的提交操作function submitForm() {// 这两行代码使用原生 JavaScript 获取表单中输入框的值。// 通过 getElementById() 方法选择具有相应 id 的元素，// 并使用 .value 属性获取输入框的值，将其存储在相应的变量中。var name = document.getElementById("name").value;var age = document.getElementById("age").value;//创建一个 XMLHttpRequest 对象，用于发送 Ajax 请求。var xhr = new XMLHttpRequest();//设置 Ajax 请求的方法、URL 和异步标志。// "POST" 表示使用 POST 方法发送请求，"/add" 是请求的目标 URL，true 表示使用异步方式发送请求。xhr.open("POST", "/add", true);//设置请求头的 Content-Type，指定请求的数据格式为 URL 编码形式。xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//这是一个回调函数，用于处理 Ajax 请求的状态变化。// 当readyState变为 4（表示请求已完成）且status为 200（表示请求成功）时，会执行其中的代码xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {// 在这里处理Ajax响应console.log(xhr.responseText); // 打印响应内容}};// 构建要发送的数据字符串// 通过将姓名和年龄进行 URL 编码，并使用 + 连接符拼接成一个字符串。var data = "name=" + encodeURIComponent(name) + "&age=" + encodeURIComponent(age);//发送 Ajax 请求，并将数据字符串作为请求的主体发送到服务器。xhr.send(data);}
</script>
</body>
</html>执行程序
启动命令：
python app.py
访问地址：
localhost:5000
展示图
后记
觉得有用可以收藏或点赞！
相关文章：
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, reque…...
八皇后问题的解析与实现
问题描述 八皇后问题是一个古老而又著名的问题。 时间退回到1848年，国际西洋棋棋手马克斯贝瑟尔提出了这样的一个问题： 在88格的国际象棋上摆放八个皇后，使其不能互相攻击，即任意两个皇后都不能处于同一行、同一列或同一斜线上，问一共有多少种摆法。 如何找到这所有的…...
论文浅尝 | 深度神经网络的模型压缩
笔记整理：闵德海，东南大学硕士，研究方向为知识图谱 链接：https://arxiv.org/abs/1412.6550 动机 提高神经网络的深度通常可以提高网络性能，但它也使基于梯度的训练更加困难，因为更深的网络往往更加强的非线…...
进阶JAVA篇- DateTimeFormatter 类与 Period 类、Duration类的常用API（八）
目录 1.0 DateTimeFormatter 类的说明 1.1 如何创建格式化器的对象呢？ 1.2 DateTimeFormatter 类中的 format（LocalDateTime ldt） 实例方法 2.0 Period 类的说明 2.1 Period 类中的 between(localDate1,localDate2) 静态方法来创建对象。 3.…...
1.1 Windows驱动开发：配置驱动开发环境
在进行驱动开发之前，您需要先安装适当的开发环境和工具。首先，您需要安装Windows驱动开发工具包（WDK），这是一组驱动开发所需的工具、库、示例和文档。然后，您需要安装Visual Studio开发环境，以便…...
Jetpack：009-kotlin中的lambda、匿名函数和闭包
文章目录 1. 概念介绍2. 使用方法2.1 函数类型的变量2.2 高阶函数 3. 内容总结4.经验分享 我们在上一章回中介绍了Jetpack中Icon和Imamg相关的内容，本章回中主要介绍Kotlin中的 lambda、匿名函数和闭包。闲话休提，让我们一起Talk Android Jetpack吧&…...
openGauss指定schema下全部表结构备份与恢复
本次测试针对openGauss版本为2.0.5 gs_dump指定schema下全部表结构信息备份 gs_dump database_name -U username -p port -F c -s -n schema_name -f schema.sqldatabase_name：数据库名，要备份的数据库名称 username：用户名，数据…...
干货：如何在前端统计用户访问来源？
在前端统计用户访问来源是一个常见的需求，通过获取访问来源信息，我们可以了解用户是通过直接访问、搜索引擎、外部链接等途径进入我们的网站或应用。下面是一个详细的介绍，包括方法和实现步骤。 一、获取HTTP Referer HTTP Referer是HTTP请…...
李宏毅生成式AI课程笔记（持续更新
01 ChatGPT在做的事情 02 预训练（Pre-train） ChatGPT G-Generative P-Pre-trained T-Transformer GPT3 ----> InstructGPT（经过预训练的GPT3） 生成式学习的两种策略 我们在使用ChatGPT的时候会注意到，网站上…...
nodejs+vue+elementui酒店客房服务系统mysql带商家
视图层其实质就是vue页面，通过编写vue页面从而展示在浏览器中，编写完成的vue页面要能够和控制器类进行交互，从而使得用户在点击网页进行操作时能够正常。 简单的说 Node.js 就是运行在服务端的 JavaScript。 前端技术：nodejsvueel…...
【网络协议】聊聊网络分层
常用的网络协议 首先我们输入www.taobao.com，会先经过DNS进行域名解析，转换为59.82.122.115的公网IP地址。然后就会发起请求，一般来说非加密的使用http，加密的使用https。上面是在应用层做的处理，那么接下来就是到传输…...
[开源]基于Vue+ElementUI+G2Plot+Echarts的仪表盘设计器
一、开源项目简介 基于SpringBoot、MyBatisPlus、ElementUI、G2Plot、Echarts等技术栈的仪表盘设计器，具备仪表盘目录管理、仪表盘设计、仪表盘预览能力，支持MySQL、Oracle、PostgreSQL、MSSQL、JSON等数据集接入，对于复杂数据处理还可以使用…...
html设置前端加载动画
主体思路参考： 前端实现页面加载动画_边城仔的博客-CSDN博客 JS图片显示与隐藏案例_js控制图片显示隐藏-CSDN博客 1、编写load.css /* 显示加载场景 */ .loadBackGround{position: absolute;top: 0px;text-align: center;width: 100%;height: 100vh;background-c…...
【git的使用方法】——上传文件到gitlab仓库
先进入到你克隆下来的仓库的目录里面 比如：我的仓库名字为zhuox 然后将需要上传推送的文件拷贝到你的克隆仓库下 这里的话我需要拷贝的项目是t3 输入命令ls，就可以查看该文件目录下的所有文件信息 然后输入git add 文件名 我这边输入的是 &#x…...
Kafka 开启SASL/SCRAM认证 及 ACL授权（二）ACL
Kafka 开启SASL/SCRAM认证 及 ACL授权（二）ACL。 官网地址：https://kafka.apache.org/ kafka authentorization：https://docs.confluent.io/platform/current/kafka/authorization.html 一、开启ZK ACL（可选，内网环境，用户无机器访问权限时） 给kafka meta都加上zk的ac…...
Java8 新特性之Stream（三）-- Stream的终结操作
目录 1.forEach(Consumer) 2.reduce(BinaryOperator) 3.max([Comparator]) 4.min([Comparator]) 5.count() 6.findFirst() 7.findAny() 拓展：...
【Vue面试题二十八】、vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？
文章底部有个人公众号：热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享？ 踩过的坑没必要让别人在再踩，自己复盘也能加深记忆。利己利人、所谓双赢。 面试官：vue要做权限管理该怎么做…...
1、验证1101序列（Moore）
题目要求： 用Moore型状态机验证1101序列。 题目描述： 用使用状态机验证1101序列，注意：允许重复子序列。如图 端口描述： module moore_1101(input clk,//时钟信号input clr,//reset复位信号，高电平有效in…...
Java基础面试-BeanFactroy和ApplicationContext
ApplicationContext是BeanFactory的子接口 ApplicationContext提供了更完整的功能: 继承MessageSource，因此支持国际化。统一的资源文件访问方式。提供在监听器中注册bean的事件。同时加载多个配置文件。载入多个(有继承关系)上下文，使得每一个上下文都…...
js的入口函数
JavaScript的入口函数是指在HTML页面加载完毕后，JavaScript代码开始执行的函数。这个函数一般被称为onload函数，它的作用是在页面加载完成后执行一些初始化操作，或者对页面进行动态修改。 在HTML页面中，可以通过以下方式设置入口…...
告别pip install langchain！用uv一步搞定LangChain 1.x环境（附pyproject.toml配置）
用uv重构LangChain开发环境：从依赖管理到生产级配置实战 如果你还在用pip install langchain搭建开发环境，可能已经落后于现代Python开发的效率标准了。当项目依赖逐渐复杂，特别是需要处理像LangChain这样包含多个可选组件（如open…...
OpenClaw技能扩展：Qwen3.5-9B加持下的Markdown文章自动发布
OpenClaw技能扩展：Qwen3.5-9B加持下的Markdown文章自动发布 1. 从手动到自动的内容发布革命 作为一个技术博客作者，我每天最耗时的不是写作本身，而是反复复制粘贴内容到各个平台。上周尝试用OpenClawQwen3.5-9B实现公众号自动发布时&#x…...
Matlab实战：5种方法可视化MIMO/SISO信道容量差异（附完整代码）
Matlab实战：5种方法可视化MIMO/SISO信道容量差异（附完整代码） 无线通信系统的性能评估离不开对信道容量的深入理解。对于刚接触多天线系统的学习者来说，如何直观比较不同天线配置下的性能差异是一个常见痛点。本文将用Matlab带你探…...
LongCat动物百变秀快速入门：上传图片+输入文字=神奇效果
LongCat动物百变秀快速入门：上传图片输入文字神奇效果 1. 认识动物百变秀 你是否想过给家里的宠物猫换个造型？或者把普通的狗狗照片变成威风凛凛的狼？LongCat动物百变秀让这些想象变成现实。这是一个基于美团开源技术的智能图片编辑工具&am…...
FastAPI文档示例：请求响应样例配置的终极指南
FastAPI文档示例：请求响应样例配置的终极指南 【免费下载链接】fastapi FastAPI framework, high performance, easy to learn, fast to code, ready for production 项目地址: https://gitcode.com/GitHub_Trending/fa/fastapi FastAPI是一个高性能、易于学…...
GLM-4.7-Flash多场景落地：保险条款解读、理赔话术生成与客户异议应答
GLM-4.7-Flash多场景落地：保险条款解读、理赔话术生成与客户异议应答 保险行业每天都要处理海量的文本工作：厚厚的保单条款需要解读，复杂的理赔申请需要沟通，客户的各种疑问需要专业、及时地回应。这些工作不仅繁琐，而…...
多无人机协同避障之自适应重构 V 型编队与分布式控制算法探索
多无人机 协同避障 自适应重构v型编队 分布式控制算法 包含参考文献和完整代码 #无人机 #协同避障 #重构队形 #分布式控制 #自适应重构编队在无人机应用领域，多无人机协同作业已成为研究热点。其中，协同避障以及自适应重构编队是实现高效任务执行的关键技…...
梦幻动漫魔法工坊作品集：看看AI能画出多可爱的二次元世界
梦幻动漫魔法工坊作品集：看看AI能画出多可爱的二次元世界 1. 走进梦幻动漫魔法工坊 想象一下，你脑海中浮现出一个可爱的猫耳少女形象：粉色长发随风飘动，大大的眼睛闪烁着星光，穿着精致的洛丽塔裙子站在糖果色的背景中…...
解决WSL2和Hyper-V网络冲突：最新镜像模式+防火墙配置指南
解决WSL2与Hyper-V网络冲突的终极方案：镜像模式与防火墙深度配置 在Windows系统上同时运行WSL2和Hyper-V虚拟机时，网络冲突问题几乎成为每个开发者的必经之路。想象一下这样的场景：当你正在调试一个分布式系统，WSL2中的微服务需要…...
KeyPass深度解析：打造完全离线的现代密码管理解决方案
KeyPass深度解析：打造完全离线的现代密码管理解决方案 【免费下载链接】KeyPass KeyPass: Open-source & offline password manager. Store, manage, take control securely. 项目地址: https://gitcode.com/gh_mirrors/ke/KeyPass 在数字时代࿰…...