flask中js点击提交数据到数据库
时间: 2024-02-26 14:58:44 浏览: 127
在Flask中,可以使用AJAX技术将前端页面中的数据提交到后端Flask应用程序,然后将数据插入到数据库中。下面是一个简单的示例代码:
1.前端页面代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Flask AJAX提交数据到数据库</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form id="myform">
<input type="text" name="name" placeholder="姓名"><br>
<input type="text" name="age" placeholder="年龄"><br>
<input type="text" name="gender" placeholder="性别"><br>
<button type="button" onclick="submitForm()">提交</button>
</form>
<script>
function submitForm() {
var formdata = $("#myform").serialize();
$.ajax({
url: "/submit",
type: "POST",
data: formdata,
success: function(response) {
alert(response);
},
error: function(xhr) {
alert(xhr.responseText);
}
});
}
</script>
</body>
</html>
```
2.后端Flask应用程序代码:
```python
from flask import Flask, render_template, request, jsonify
import pymysql
app = Flask(__name__)
@app.route("/")
def index():
return render_template("index.html")
@app.route("/submit", methods=["POST"])
def submit():
name = request.form.get("name")
age = request.form.get("age")
gender = request.form.get("gender")
# 连接数据库
conn = pymysql.connect(host="localhost", user="root", password="123456", database="testdb", charset="utf8")
cursor = conn.cursor()
# 插入数据
try:
sql = "INSERT INTO student(name, age, gender) VALUES (%s, %s, %s)"
cursor.execute(sql, (name, age, gender))
conn.commit()
return jsonify({"status": 0, "msg": "提交成功"})
except Exception as e:
conn.rollback()
return jsonify({"status": -1, "msg": "提交失败,错误信息:%s" % e})
finally:
cursor.close()
conn.close()
if __name__ == "__main__":
app.run(debug=True)
```
在上面的代码中,前端页面中的数据会通过AJAX的方式提交到`/submit`路由,然后在后端Flask应用程序中将数据插入到MySQL数据库中。当数据插入成功时,返回JSON格式的数据,否则返回错误信息。最后,在`if __name__ == "__main__":`的条件下运行Flask应用程序。
阅读全文