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 

展示图 

后记 

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/159911.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

framework通信机制—LiveData使用方法及原理

LiveData是一种可观察的数据存储器类。与常规的可观察类不同&#xff0c;LiveData 具有生命周期感知能力&#xff0c;意指它遵循其他应用组件&#xff08;如 activity、fragment 或 service&#xff09;的生命周期。这种感知能力可确保 LiveData 仅更新处于活跃生命周期状态的应…

树模型(三)决策树

决策树是什么&#xff1f;决策树(decision tree)是一种基本的分类与回归方法。 长方形代表判断模块 (decision block)&#xff0c;椭圆形成代表终止模块(terminating block)&#xff0c;表示已经得出结论&#xff0c;可以终止运行。从判断模块引出的左右箭头称作为分支(branch)…

PyTorch 深度学习之加载数据集Dataset and DataLoader(七)

1. Revision: Manual data feed 全部Batch&#xff1a;计算速度&#xff0c;性能有问题 1 个 &#xff1a;跨越鞍点 mini-Batch:均衡速度与性能 2. Terminology: Epoch, Batch-Size, Iteration DataLoader: batch_size2, sheffleTrue 3. How to define your Dataset 两种处…

Java-使用sqlSessionTemplate实现批量更新-模拟mybatis 动态sql

环境准备&#xff08;非核心方法&#xff09; 创建表 创建表的sql(下表是基于Oracle创建的) CREATE TABLE "SYSTEM"."STUDENT" ("ID" NUMBER(10, 0),"NAME" VARCHAR2(20 BYTE),"ADDRES" CLOB,PRIMARY KEY ( …

Element UI库 之 el-input 赋值后不能删除,修改,输入

最近做了一个需求就是导入数据的&#xff0c; 导入了之后发现打折跟促销价都发不能修改了&#xff0c; 甚至删除都不行。后面去查了下发现大概是数据响应的问题。大概的解决办法有下面几个&#xff0c;我是用最后一个解决的 方法一&#xff1a;强制更新 在绑定input里面的调用…

micropython ESP32-S3点亮板载RGB灯珠

micropython ESP32-S3点亮板载RGB灯珠 1、vscode中安装 RT-Thread插件 2、新建个文件夹 3、在这个文件夹下面创建一个文件&#xff0c;命名为neopixel.py。在该文件中粘贴下面代码。 # NeoPixel driver for MicroPython on ESP32 # MIT license; Copyright (c) 2016 Damie…

windows应用程序告警:帐户名与安全标识间无任何映射完成

目录 一、问题现象 二、问题解决 &#xff08;一&#xff09;官方方法 &#xff08;二&#xff09;问题定位 &#xff08;三&#xff09;问题处理 一、问题现象 今天巡检域控服务器时&#xff0c;发现告警如下&#xff1a; 安全策略已传播&#xff0c;但有警告信息。 0x534…

苹果 Vision Pro 头显新专利:增加重量减轻颈部压力

上周&#xff0c;彭博社的古尔曼表示 Vision Pro 头显过重&#xff0c;导致开发者佩戴后出现明显的颈部疲劳。随后&#xff0c;便有人发现在美国商标和专利局&#xff08;USPTO&#xff09;公示的清单中&#xff0c;苹果公司又获得了一项Vision Pro的专利&#xff0c;该专利提…

【深度学习 | Transformer】释放注意力的力量:探索深度学习中的 变形金刚,一文带你读通各个模块 —— Positional Encoding(一)

&#x1f935;‍♂️ 个人主页: AI_magician &#x1f4e1;主页地址&#xff1a; 作者简介&#xff1a;CSDN内容合伙人&#xff0c;全栈领域优质创作者。 &#x1f468;‍&#x1f4bb;景愿&#xff1a;旨在于能和更多的热爱计算机的伙伴一起成长&#xff01;&#xff01;&…

SpringBoot面试题4:Spring Boot 支持哪些日志框架?推荐和默认的日志框架是哪个?

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:Spring Boot 支持哪些日志框架?推荐和默认的日志框架是哪个? Spring Boot支持多种日志框架,包括以下几种: Logback:Logback 是一个快速、灵活…

Windows10不常用操作(录屏、开启超级管理员、关闭自动IP配置、Edge崩溃等)

Win10家庭版开启超级管理员 Win10家庭版开启或禁用超级管理员账户步骤如下&#xff1a; 在搜索框中输入CMD&#xff0c;右键以管理员方式运行。 开启 net user administrator /active:yes禁用 net user administrator /active:no Win10关闭自动IP配置 win10设置完静态ip&am…

Nlopt在matlab中的配置教程

step1&#xff1a;克隆代码并编译 编译的前提是已经安装好MinGW64 # 使用镜像加速 git clone https://gitclone.com/github.com/stevengj/nloptcd nlopt mkdir build cd build cmake -G"MinGW Makefiles" .. cmake --build .# 注意此处博主在mingw安装目录将mingw3…

iPhone 如何强制重启

参考iPhone的官方使用手册 传送门 尤其当 iPhone 未响应&#xff0c;也无法将其关机再开机&#xff0c;此方法最有效&#xff1a; 按住调高音量按钮&#xff0c;然后快速松开。按住调低音量按钮&#xff0c;然后快速松开。按住侧边按钮。当 Apple 标志出现时&#xff0c;松开侧…

探索低代码技术

低/无代码的高速发展&#xff0c;属于软件市场的选择&#xff0c;相较于传统编写代码的开发方式&#xff0c;低/无代码开发效率高、投入成本低、技术门槛也更低&#xff0c;未来更多软件应用将使用低/无代码技术完成&#xff0c;这也是趋势。 身为开发人员经常需要花大量时间在…

平台系统老板驾驶舱的重要性,我选云表

平台系统老板驾驶舱的重要性在于它是一个集成的管理和分析工具&#xff0c;能够提供对平台系统运行情况的全面和实时的监控、分析和管理功能。以下是平台系统老板驾驶舱的重要性&#xff1a; 老板驾驶舱 该表单可供老板实时把控企业运营情况&#xff0c;包括销售业绩、…

Linux高性能服务器编程 学习笔记 第十四章 进程池和线程池

动态创建子进程或子线程的缺点&#xff1a; 1.动态创建进程或线程比较耗时&#xff0c;这将导致较慢的客户响应。 2.动态创建的子进程或子线程通常只用来为一个客户服务&#xff08;除非我们做特殊处理&#xff09;&#xff0c;这将导致系统上产生大量的进程或线程&#xff0c…

云原生场景下高可用架构的最佳实践

作者&#xff1a;刘佳旭&#xff08;花名&#xff1a;佳旭&#xff09;&#xff0c;阿里云容器服务技术专家 引言 随着云原生技术的快速发展以及在企业 IT 领域的深入应用&#xff0c;云原生场景下的高可用架构&#xff0c;对于企业服务的可用性、稳定性、安全性越发重要。通…

3.DApp-Metamask登录不了解决方法

题记 当遇到metamask登录不了&#xff0c;加载一直转圈圈&#xff0c;可以用以下的方法解决。 切换网络 切换成Linea Mainnet测试网络&#xff1a; 输入密码 输入登录密码登录metamask 重新选择自定义网络 选择自己本地自定义的网络&#xff1a; 后记 觉得有用可以收藏或点…

kong网关从入门到放弃

Kong网关是一个轻量级、快速、灵活的云名称API网关。Kong Gateway位于您的服务应用程序前面&#xff0c;可动态控制、分析和路由请求和响应。KongGateway通过使用灵活、低代码、基于插件的方法来实现您的API流量策略。 https://docs.konghq.com/gateway/latest/#features 架构…

Redis删除过期key策略

文章目录 前言Redis中key的的过期时间在创建 key 时使用 EXPIRE 命令设置过期时间(秒级)使用 EXPIREAT 命令设置一个精确的过期时间(unix 时间戳)使用 PEXPIRE 命令设置过期时间(毫秒级)使用 PEXPIREAT 命令设置毫秒级精确过期时间在 Redis 配置文件中设置所有 key 的默认过期时…