当前位置: 首页 > news >正文

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请求&#xff0c;以下是一个简单的实例和操作过程。 安装flask模块 pip install flask 安装mysql.connector模块 pip install mysql-connector-python 编写app.py文件 app.py文件如下&#xff1a; from flask import Flask, reque…...

八皇后问题的解析与实现

问题描述 八皇后问题是一个古老而又著名的问题。 时间退回到1848年,国际西洋棋棋手马克斯贝瑟尔提出了这样的一个问题: 在88格的国际象棋上摆放八个皇后,使其不能互相攻击,即任意两个皇后都不能处于同一行、同一列或同一斜线上,问一共有多少种摆法。 如何找到这所有的…...

论文浅尝 | 深度神经网络的模型压缩

笔记整理&#xff1a;闵德海&#xff0c;东南大学硕士&#xff0c;研究方向为知识图谱 链接&#xff1a;https://arxiv.org/abs/1412.6550 动机 提高神经网络的深度通常可以提高网络性能&#xff0c;但它也使基于梯度的训练更加困难&#xff0c;因为更深的网络往往更加强的非线…...

进阶JAVA篇- DateTimeFormatter 类与 Period 类、Duration类的常用API(八)

目录 1.0 DateTimeFormatter 类的说明 1.1 如何创建格式化器的对象呢&#xff1f; 1.2 DateTimeFormatter 类中的 format&#xff08;LocalDateTime ldt&#xff09; 实例方法 2.0 Period 类的说明 2.1 Period 类中的 between(localDate1,localDate2) 静态方法来创建对象。 3.…...

1.1 Windows驱动开发:配置驱动开发环境

在进行驱动开发之前&#xff0c;您需要先安装适当的开发环境和工具。首先&#xff0c;您需要安装Windows驱动开发工具包&#xff08;WDK&#xff09;&#xff0c;这是一组驱动开发所需的工具、库、示例和文档。然后&#xff0c;您需要安装Visual Studio开发环境&#xff0c;以便…...

Jetpack:009-kotlin中的lambda、匿名函数和闭包

文章目录 1. 概念介绍2. 使用方法2.1 函数类型的变量2.2 高阶函数 3. 内容总结4.经验分享 我们在上一章回中介绍了Jetpack中Icon和Imamg相关的内容&#xff0c;本章回中主要介绍Kotlin中的 lambda、匿名函数和闭包。闲话休提&#xff0c;让我们一起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&#xff1a;数据库名&#xff0c;要备份的数据库名称 username&#xff1a;用户名&#xff0c;数据…...

干货:如何在前端统计用户访问来源?

在前端统计用户访问来源是一个常见的需求&#xff0c;通过获取访问来源信息&#xff0c;我们可以了解用户是通过直接访问、搜索引擎、外部链接等途径进入我们的网站或应用。下面是一个详细的介绍&#xff0c;包括方法和实现步骤。 一、获取HTTP Referer HTTP Referer是HTTP请…...

李宏毅生成式AI课程笔记(持续更新

01 ChatGPT在做的事情 02 预训练&#xff08;Pre-train&#xff09; ChatGPT G-Generative P-Pre-trained T-Transformer GPT3 ----> InstructGPT&#xff08;经过预训练的GPT3&#xff09; 生成式学习的两种策略 我们在使用ChatGPT的时候会注意到&#xff0c;网站上…...

nodejs+vue+elementui酒店客房服务系统mysql带商家

视图层其实质就是vue页面&#xff0c;通过编写vue页面从而展示在浏览器中&#xff0c;编写完成的vue页面要能够和控制器类进行交互&#xff0c;从而使得用户在点击网页进行操作时能够正常。 简单的说 Node.js 就是运行在服务端的 JavaScript。 前端技术&#xff1a;nodejsvueel…...

【网络协议】聊聊网络分层

常用的网络协议 首先我们输入www.taobao.com&#xff0c;会先经过DNS进行域名解析&#xff0c;转换为59.82.122.115的公网IP地址。然后就会发起请求&#xff0c;一般来说非加密的使用http&#xff0c;加密的使用https。上面是在应用层做的处理&#xff0c;那么接下来就是到传输…...

[开源]基于Vue+ElementUI+G2Plot+Echarts的仪表盘设计器

一、开源项目简介 基于SpringBoot、MyBatisPlus、ElementUI、G2Plot、Echarts等技术栈的仪表盘设计器&#xff0c;具备仪表盘目录管理、仪表盘设计、仪表盘预览能力&#xff0c;支持MySQL、Oracle、PostgreSQL、MSSQL、JSON等数据集接入&#xff0c;对于复杂数据处理还可以使用…...

html设置前端加载动画

主体思路参考&#xff1a; 前端实现页面加载动画_边城仔的博客-CSDN博客 JS图片显示与隐藏案例_js控制图片显示隐藏-CSDN博客 1、编写load.css /* 显示加载场景 */ .loadBackGround{position: absolute;top: 0px;text-align: center;width: 100%;height: 100vh;background-c…...

【git的使用方法】——上传文件到gitlab仓库

先进入到你克隆下来的仓库的目录里面 比如&#xff1a;我的仓库名字为zhuox 然后将需要上传推送的文件拷贝到你的克隆仓库下 这里的话我需要拷贝的项目是t3 输入命令ls&#xff0c;就可以查看该文件目录下的所有文件信息 然后输入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要做权限管理该怎么做?如果控制到按钮级别的权限怎么做?

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 面试官&#xff1a;vue要做权限管理该怎么做…...

1、验证1101序列(Moore)

题目要求&#xff1a; 用Moore型状态机验证1101序列。 题目描述&#xff1a; 用使用状态机验证1101序列&#xff0c;注意&#xff1a;允许重复子序列。如图 端口描述&#xff1a; module moore_1101(input clk,//时钟信号input clr,//reset复位信号&#xff0c;高电平有效in…...

Java基础面试-BeanFactroy和ApplicationContext

ApplicationContext是BeanFactory的子接口 ApplicationContext提供了更完整的功能: 继承MessageSource&#xff0c;因此支持国际化。统一的资源文件访问方式。提供在监听器中注册bean的事件。同时加载多个配置文件。载入多个(有继承关系)上下文&#xff0c;使得每一个上下文都…...

js的入口函数

JavaScript的入口函数是指在HTML页面加载完毕后&#xff0c;JavaScript代码开始执行的函数。这个函数一般被称为onload函数&#xff0c;它的作用是在页面加载完成后执行一些初始化操作&#xff0c;或者对页面进行动态修改。 在HTML页面中&#xff0c;可以通过以下方式设置入口…...

权威榜单|2026年新手必选无人机推荐

推荐1&#xff1a;博坦ATOM2S产品概述与核心亮点博坦ATOM2S是一款专为新手用户设计的无人机&#xff0c;具有简单易用的操作系统和智能飞行功能。其搭载高清摄像头&#xff0c;可以拍摄高质量的4K视频&#xff0c;满足用户对画质的基本需求。ATOM2S还配备了智能跟随、航点飞行等…...

Midjourney 35mm风格生成失效真相(35mm胶片模拟底层机制大起底)

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Midjourney 35mm风格生成失效的表象与核心矛盾 近期大量用户反馈&#xff0c;在 Midjourney v6 及后续快速迭代版本中&#xff0c;使用传统提示词如 --style raw --s 750 配合 35mm film, Kodak Portra…...

如何高效拆分CATIA多实体零件:pycatia自动化解决方案的完整指南

如何高效拆分CATIA多实体零件&#xff1a;pycatia自动化解决方案的完整指南 【免费下载链接】pycatia python module for CATIA V5 automation 项目地址: https://gitcode.com/gh_mirrors/py/pycatia 在CATIA三维设计领域&#xff0c;工程师们经常面临一个常见挑战&…...

Vivado里手把手配置MIPI CSI-2 RX Subsystem IP核:从D-PHY选IO到Video Format Bridge算位宽

Vivado中MIPI CSI-2 RX Subsystem IP核配置实战&#xff1a;从D-PHY选型到视频格式转换 在ZYNQ系列SoC的视觉处理系统中&#xff0c;MIPI CSI-2接口作为连接图像传感器的标准协议&#xff0c;其硬件实现往往成为项目成败的关键节点。本文将深入剖析Vivado工具中MIPI CSI-2 RX S…...

英文论文降AI全靠同义词替换?错!3款“结构级”辅助工具实测,稳过Turnitin

这两天帮朋友看海外项目的英文稿&#xff0c;发现大家全卡在了 Turnitin 的高疑似度上。熬夜手敲的长篇英文&#xff0c;一查AI率高的吓人&#xff0c;直接让人血压飙升。 为了提升文本表达的原创度&#xff0c;很多人疯狂寻找免费降ai率的方法。其实现在的海外检测早就进化了&…...

Relic项目:用纯文本文件为AI工具打造可移植的持久记忆系统

1. 项目概述&#xff1a;为你的AI伙伴打造一个持久、可移植的“灵魂芯片”如果你和我一样&#xff0c;深度依赖各种AI工具来辅助工作、学习和创作&#xff0c;那你一定遇到过这个令人头疼的问题&#xff1a;每次切换工具&#xff0c;都像是在和一个“失忆”的新朋友重新建立关系…...

网盘直链解析方案:如何通过浏览器脚本实现多平台文件下载优化

网盘直链解析方案&#xff1a;如何通过浏览器脚本实现多平台文件下载优化 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 &#xff0c;支持 百度网盘 / 阿里云盘 / 中国移动云盘…...

发现开源神器:三步解锁卡车模拟器的智能驾驶新纪元

发现开源神器&#xff1a;三步解锁卡车模拟器的智能驾驶新纪元 【免费下载链接】Euro-Truck-Simulator-2-Lane-Assist Plugin based interface program for ETS2/ATS. 项目地址: https://gitcode.com/gh_mirrors/eur/Euro-Truck-Simulator-2-Lane-Assist 你是否曾梦想在…...

基于RAG架构的本地知识库构建:从原理到Shannon实战

1. 项目概述&#xff1a;一个面向开发者的高效本地知识库构建工具最近在折腾个人知识管理和团队文档沉淀时&#xff0c;发现了一个挺有意思的开源项目&#xff0c;叫Shannon。这项目名挺有深意&#xff0c;取自信息论之父克劳德香农&#xff0c;一听就知道是跟信息处理和知识组…...

《机密计算破局政务金融、截图工具漏洞泄露NTLM哈希、智能体仿冒日增200+:AI安全的三场“攻防战”》

一、全链路机密计算破局&#xff1a;政务/金融敏感数据进入“可信推理”时代当前&#xff0c;大模型落地过程中面临的核心矛盾在于&#xff1a;越是高价值的专业技术领域&#xff0c;其训练数据和实时推理数据的安全级别就越高。在政务场景中&#xff0c;政府规划、财政数据、内…...