正文

表单提交后，轻松查看你的提交记录，一步到位！

/0 浏览量
0726

在现代网络应用中，表单提交是用户与网站交互的重要方式。完成表单提交后，能够方便快捷地查看自己的提交记录，不仅提升了用户体验，也增加了数据的可追溯性。以下是一些实现这一功能的方法，让你一步到位地查看提交记录。

1. 后端记录存储

首先，确保在服务器端对用户提交的数据进行存储。以下是一个简单的后端存储方案：

1.1 数据库设计

选择合适的数据库来存储表单数据。以下是使用MySQL数据库的一个示例：

CREATE TABLE form_submissions (
    id INT AUTO_INCREMENT PRIMARY KEY,
    user_id INT,
    form_data TEXT,
    submission_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

1.2 数据存储

在用户提交表单后，将数据插入到数据库中：

import mysql.connector

def store_submission(user_id, form_data):
    db = mysql.connector.connect(
        host="localhost",
        user="yourusername",
        password="yourpassword",
        database="yourdatabase"
    )
    cursor = db.cursor()
    cursor.execute("INSERT INTO form_submissions (user_id, form_data) VALUES (%s, %s)", (user_id, form_data))
    db.commit()
    db.close()

2. 前端展示

在用户界面中，提供一个展示提交记录的页面。以下是一个简单的HTML和JavaScript示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Submit Records</title>
</head>
<body>
    <h1>Submit Records</h1>
    <div id="records"></div>
    <script>
        function fetchRecords() {
            fetch('/fetch-records')
                .then(response => response.json())
                .then(data => {
                    const recordsDiv = document.getElementById('records');
                    recordsDiv.innerHTML = '';
                    data.forEach(record => {
                        const p = document.createElement('p');
                        p.textContent = `ID: ${record.id}, Data: ${record.form_data}, Time: ${record.submission_time}`;
                        recordsDiv.appendChild(p);
                    });
                });
        }
        fetchRecords();
    </script>
</body>
</html>

2.1 后端接口

创建一个后端接口来处理记录的获取：

from flask import Flask, jsonify
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://yourusername:yourpassword@localhost/yourdatabase'
db = SQLAlchemy(app)

@app.route('/fetch-records')
def fetch_records():
    records = FormSubmission.query.all()
    return jsonify([{'id': record.id, 'form_data': record.form_data, 'submission_time': record.submission_time} for record in records])

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

3. 总结

通过后端记录存储和前端展示，用户可以轻松查看自己的提交记录。这种方法不仅提高了用户体验，还有助于数据分析和问题追踪。在实际应用中，可以根据具体需求对数据库设计、数据存储和前端展示进行优化。

-- 展开阅读全文 --