如何将JavaScript prompt弹窗获取的用户输入传递给Python Flask后端

你现有代码的核心问题是：表单内的按钮默认点击后会直接触发表单提交，不会等待JS中prompt的逻辑执行完成，因此无法把prompt获取到的值随请求传给后端。
解决思路很简单：拦截按钮的默认提交行为，等用户完成prompt输入、校验通过后，把输入值动态插入表单，再手动触发提交即可。

第一步：修改前端模板代码 #

首先修正原有模板的常见问题：Jinja2渲染的属性值要加引号，避免特殊字符导致HTML解析错误；其次在点击事件中拦截默认提交，完成输入校验后再提交表单，代码如下：

<!-- students.html -->
<form method="POST" action="/students" id="studentForm">
    <!-- 给按钮加type="button"避免默认提交，把学生邮箱存在data属性方便JS读取 -->
    <button 
        type="button"
        name="remove_student_button" 
        value="{{ student.email }}"
        data-student-email="{{ student.email }}"
        onClick="myFunction(this)"
    >
        Remove
    </button>
</form>

<script>
function myFunction(btn) {
    // 读取当前要删除的目标学生邮箱
    const targetEmail = btn.dataset.studentEmail;
    const userInput = prompt("Are you sure you want to remove this entry? Enter the student's email to confirm your action.");
    
    // 用户取消或输入为空，直接终止逻辑
    if (!userInput) {
        return;
    }

    // 前端预校验：输入邮箱和目标邮箱不一致直接提示，不发请求
    if (userInput.trim() !== targetEmail) {
        alert("The email you entered does not match the target student, operation cancelled.");
        return;
    }

    const form = document.getElementById("studentForm");
    // 插入隐藏字段，存prompt拿到的用户输入值
    const confirmInput = document.createElement("input");
    confirmInput.type = "hidden";
    confirmInput.name = "confirm_email";
    confirmInput.value = userInput.trim();
    form.appendChild(confirmInput);

    // 手动补提交按钮的字段：type="button"不会自动随表单提交name/value，加隐藏字段兼容原有后端判断逻辑
    const removeFlagInput = document.createElement("input");
    removeFlagInput.type = "hidden";
    removeFlagInput.name = "remove_student_button";
    removeFlagInput.value = targetEmail;
    form.appendChild(removeFlagInput);

    // 手动触发表单提交
    form.submit();
}
</script>

第二步：调整后端路由逻辑 #

后端接收表单时，必须做二次校验（前端校验可被绕过），确认用户输入的邮箱和目标邮箱一致后再执行删除，同时补上原代码缺失的删除操作逻辑：

# routes.py
@app.route("/students", methods = ["GET", "POST"])
def students():
    # ... 原有GET请求处理逻辑
    if "remove_student_button" in request.form:
        email = request.form["remove_student_button"]
        # 读取用户在prompt中输入的确认邮箱
        confirm_email = request.form.get("confirm_email", "").strip()
        
        # 校验不通过直接返回
        if confirm_email != email:
            flash("Confirmation email mismatch, failed to remove student.")
            return redirect(url_for("students"))
        
        student = Student.query.filter_by(email=email).first()
        # 原代码缺失删除语句，仅commit不会生效
        db.session.delete(student)
        db.session.commit()
        flash("Student removed")
        return redirect(url_for("students", student_removed=True))
    # ... 原有其他POST请求处理逻辑

如果你需要无刷新提交的效果，可以在拿到prompt输入值后，用fetch接口发异步POST请求传数据，不需要依赖表单提交，逻辑和上述方案一致。

内容的提问来源于stack exchange，提问作者Kookie