html页面信息，运用python框架进行数据库连接存储

peace or love

已于 2022-01-20 17:59:31 修改

阅读量4.2k

点赞数

文章标签： html javascript jquery

于 2022-01-20 14:45:17 首次发布

本文链接：https://blog.csdn.net/m0_59315964/article/details/122600536

版权

创建一个html表单页面

在表单页面中编写JS脚本，获取到表单中每个输入框的值，最终通过服务框架传递到student表中做存储

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>学员信息登记</title>
	</head>
	<body bgcolor="pink">

		<h2 align="center">学员信息登记</h2>

		<form align="center" name="f">
			学号：<input type="text" name="sno" size="25" maxlength="20" /> <br><br> 姓名：
			<input type="text" name="sname" size="25" maxlength="20" /> <br><br> 性别：
			<input type="text" name="ssex" size="25" maxlength="20" /> <br><br> 年龄：
			<input type="text" name="sage" size="25" maxlength="20" /> <br><br> 专业：
			<input type="text" name="sdept" size="25" maxlength="20" /> <br><br>
			<input type="button" value="提  交" name="btn" onclick="tijiao()" />
			<input type="reset" value="重  置" name="res" />
		</form>

		<!--
        	编写脚本获取到每一个输入框中的值，并传递到teststudent库中student表中做存储
        -->

		<script language="JavaScript">
			//声明一个提交方法
			function tijiao() {
				//获取每个输入框的值
				//学号
				var snovalue = f.sno.value;

				//姓名
				var snamevalue = f.sname.value;

				//年龄
				var sagevalue = f.sage.value;

				//性别
				var ssexvalue = f.ssex.value;

				//专业
				var sdeptvalue = f.sdept.value;

				//获取到每个值之后，借助于框架来传递
				//借助于框架进行传递XMLHttpRequest 对象用于在后台与服务器交换数据
				url = 'http://127.0.0.1:5000/add'
				var request = new XMLHttpRequest()
				request.open('post', url, true)
				request.onload = function() {
					resp_text = request.responseText
					print(resp_text)
				}
				var formdata = new FormData()
				formdata.append('sno', snovalue)
				formdata.append('sname', snamevalue)
				formdata.append('ssex', ssexvalue)
				formdata.append('sage', sagevalue)
				formdata.append('sdept', sdeptvalue)

				request.send(formdata)

			}

		</script>

	</body>

</html>

2.利用MySQL技术，创建数据库teststudent，并生成一张student表，包含学号，姓名，性别，年龄，专业，五个字段

Python后台接口

1.安装python

2.安装python相关的数据库组件（win+r cmd ）

pip install flask pymysql

pip install flask-cors

用记事本整理python框架文件

from flask import Flask,  jsonify, request
from flask_cors import CORS

from pymysql import Connect

conn  = Connect(host='127.0.0.1', port=3306, user='root', passwd='123456', db='teststudent')

app = Flask(__name__)

CORS(app)

def add_name_db(sno,sname,ssex,sage,sdept):
     with conn.cursor() as c:
             sql = "insert into student(sno,sname,ssex,sage,sdept) values (%s,%s,%s,%s,%s)"
             ret = c.execute(sql, args=(sno,sname,ssex,sage,sdept))
             conn.commit()
             

@app.route('/')
def hi():
    return jsonify({'msg':  'OK', 'data':  request.args })

@app.route('/add', methods=['POST'])
def addData():
   data = request.form
   print('--->upload form data: ',   data)
   sno = data.get('sno', 'no data')
   sname = data.get('sname', '0')
   ssex = data.get('ssex', 'no data')
   sage = data.get('sage', 'no data')
   sdept = data.get('sdept', 'no data')
   add_name_db(sno,sname,ssex,sage,sdept)

   return jsonify({'msg': 'OK'})

if __name__ == '__main__':
    app.run(debug=True)

在命令提示符运行python文件

表单页面验证是否连接成功

去数据库中刷新查看数据是否进入。

peace or love

关注

0
点赞
踩
77

收藏

觉得还不错? 一键收藏
0
评论
html页面信息，运用python框架进行数据库连接存储

创建一个html表单页面在表单页面中编写JS脚本，获取到表单中每个输入框的值，最终通过服务框架传递到student表中做存储<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>学员信息登记</title> </head> <body bgcolor="pink"> <h2 align="cente.
复制链接

扫一扫