创建一个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文件
表单页面验证是否连接成功
去数据库中刷新 查看数据是否 进入。