无表单时如何将HTML输入框数据传入Flask？及a标签url_for传多变量方案

问题1：不使用form传递text input数据到Flask #

当然可以实现，核心是通过JavaScript获取input的值，再将其附加到请求中，以下是两种实用方案：

方案1：动态修改a标签的href跳转 #

给input和a标签添加标识，通过JS监听点击事件，把input值拼入URL：

<input type="text" id="userInput" placeholder="输入内容">
<a href="#" id="voteLink"> Vote </a>

<script>
const input = document.getElementById('userInput');
const link = document.getElementById('voteLink');

link.addEventListener('click', function(e) {
  e.preventDefault();
  const inputVal = input.value.trim();
  if (inputVal) {
    // 基于url_for生成的基础URL，拼接input参数
    const baseUrl = "{{ url_for('polling', Qid=question.name, option=1) }}";
    const fullUrl = `${baseUrl}?user_input=${encodeURIComponent(inputVal)}`;
    window.location.href = fullUrl;
  } else {
    alert('请输入内容');
  }
});
</script>

Flask路由中通过request.args获取参数：

from flask import request

@app.route('/polling/<Qid>/<option>')
def polling(Qid, option):
    user_input = request.args.get('user_input')
    # 这里可对user_input进行存储或业务处理
    return redirect(url_for('results', Qid=Qid))

方案2：异步POST请求（无刷新提交） #

如果不需要页面跳转，用fetch发送POST请求：

<input type="text" id="userInput" placeholder="输入内容">
<button id="voteBtn"> Vote </button>

<script>
const input = document.getElementById('userInput');
const btn = document.getElementById('voteBtn');

btn.addEventListener('click', function() {
  const inputVal = input.value.trim();
  if (inputVal) {
    fetch("{{ url_for('polling', Qid=question.name, option=1) }}", {
      method: 'POST',
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      body: `user_input=${encodeURIComponent(inputVal)}`
    }).then(response => {
      if (response.ok) {
        window.location.href = "{{ url_for('results', Qid=question.name) }}";
      }
    });
  } else {
    alert('请输入内容');
  }
});
</script>

Flask路由需支持POST方法：

from flask import request

@app.route('/polling/<Qid>/<option>', methods=['GET', 'POST'])
def polling(Qid, option):
    if request.method == 'POST':
        user_input = request.form.get('user_input')
        # 处理数据逻辑
    return redirect(url_for('results', Qid=Qid))

问题2：通过a标签的url_for传递多个变量 #

你当前的代码已经实现了多变量传递（Qid和option），如果需要新增变量，直接在url_for中添加键值对即可：

• 若要将变量作为路由参数（需修改路由规则）：

<!-- 新增user_id作为路由参数 -->
<a href="{{ url_for('polling', Qid=question.name, option=1, user_id=current_user.id) }}"> Vote </a>

对应的Flask路由需同步更新：

@app.route('/polling/<Qid>/<option>/<user_id>')
def polling(Qid, option, user_id):
    # 处理逻辑
    return redirect(url_for('results', Qid=Qid))

• 若要将变量作为URL查询参数（无需修改路由规则）：

<!-- 新增user_input作为查询参数 -->
<a href="{{ url_for('polling', Qid=question.name, option=1, user_input='默认内容') }}"> Vote </a>

Flask路由中通过request.args.get('user_input')获取即可，无需修改路由定义。

适配你场景的完整方案 #

结合你无法通过form获取input的需求，推荐使用动态修改a标签href的方案，既保留跳转逻辑，又能传递input值：

1. HTML代码：

<input type="text" id="answerInput" placeholder="输入你的答案">
<a href="#" id="voteLink"> Vote </a>

<script>
const input = document.getElementById('answerInput');
const link = document.getElementById('voteLink');

link.onclick = function(e) {
  e.preventDefault();
  const inputVal = input.value.trim();
  if (!inputVal) {
    alert('请填写内容后投票');
    return;
  }
  const targetUrl = "{{ url_for('polling', Qid=question.name, option=1) }}?answer=" + encodeURIComponent(inputVal);
  window.location.href = targetUrl;
};
</script>

2. Flask路由代码：

from flask import request, redirect, url_for

@app.route('/polling/<Qid>/<option>')
def polling(Qid, option):
    user_answer = request.args.get('answer')
    # 此处可添加数据存储等业务逻辑
    print(f"用户对问题{Qid}的选项{option}提交内容：{user_answer}")
    return redirect(url_for('results', Qid=Qid))

内容的提问来源于stack exchange，提问作者Tamás Csiba