如何使用AJAX和Flask将JavaScript的URL等变量传输到Python后端

1. 前端index.html调整 #

核心修改点： #

• 修正原有代码中URL获取不完整的问题
• 新增AJAX请求逻辑，将获取到的页面URL发送到后端
  修改后的<script>标签内容如下，其余部分保持原有代码不变：

<script>
    // 补全当前页面URL获取逻辑
    let geturl = window.location.href;
    document.getElementById("demo").innerHTML = "The full URL of this page is:<br>" + geturl;

    // 发送AJAX请求到Flask后端
    fetch('/receive-url', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        // 把URL包装成JSON格式传递
        body: JSON.stringify({
            page_url: geturl
        })
    })
    .then(res => res.text())
    .then(result => {
        // 此处可处理后端返回的结果，示例为打印到控制台
        console.log('后端响应：', result)
    })
    .catch(err => console.error('请求错误：', err))
</script>

2. 后端main.py调整 #

核心修改点： #

• 新增独立路由处理AJAX的URL接收请求，和原有表单提交逻辑互不干扰
• 增加参数接收和业务处理入口
  修改后的完整代码如下：

from flask import Flask, render_template, request

app = Flask(__name__)
name = "random"
age = "21"
qualification = "software engineer"

@app.route('/')
def index():
    return render_template('index.html', person=name, age=age, ql=qualification)

@app.route('/', methods=['POST'])
def getvalue():
    name2 = request.form['name']
    age = request.form['age']
    db = request.form['dateofbirth']
    return name2

# 新增接收URL的路由
@app.route('/receive-url', methods=['POST'])
def receive_url():
    # 接收前端传来的JSON数据
    req_data = request.get_json()
    current_page_url = req_data.get('page_url')
    # 此处添加你需要的业务处理逻辑，示例为打印到后端控制台
    print(f'接收到前端传来的页面URL：{current_page_url}')
    # 返回响应给前端
    return 'URL处理完成'

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

可选配置 #

如果不需要传递JSON格式，也可以使用formData格式传递参数，对应修改前后端的参数获取方式即可：

• 前端fetch中body替换为new FormData().append('page_url', geturl)，删除headers中的Content-Type配置
• 后端获取参数改为current_page_url = request.form.get('page_url')

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