Django项目如何将HTML表单输入值追加到URL路径末尾

问题说明 #

开发Django wiki类项目时，主页侧边栏搜索框预期交互为：用户输入条目名称后直接跳转至对应条目详情页，例如输入css时自动跳转至http://127.0.0.1:8000/wiki/css，即将用户输入值直接追加到wiki根路径http://127.0.0.1:8000/wiki/末尾。
实际开发遇到两个问题：

• 表单设置get提交方法时，最终跳转地址为/wiki/?q=css，无法实现路径末尾直接拼接/css的预期效果
• 表单设置post提交方法时，提交后URL始终停留在http://127.0.0.1:8000/wiki/，不会追加用户输入内容

原因说明 #

原生HTML表单默认提交逻辑不支持将输入值直接作为路径段拼接：

• get提交会把所有表单字段作为查询参数，拼接在?后
• post提交会把表单字段放在请求体中，地址栏保持action配置的路径不变

推荐实现方案（后端重定向，兼容性最优） #

不需要依赖前端JS，符合Django常规开发逻辑，后续可灵活扩展搜索匹配规则。

第一步：修改index视图逻辑 #

打开views.py，引入重定向相关方法，在index视图中增加搜索参数判断，拿到搜索词后直接重定向到条目详情页：

from django.shortcuts import render, redirect, reverse
from django.http import HttpResponse
from django import forms
import random

from . import util


def index(request):
    # 拦截搜索提交请求
    if request.method == "GET" and "q" in request.GET:
        keyword = request.GET["q"].strip()
        # 重定向到对应条目页，地址栏自动变成/wiki/关键词格式
        return redirect(reverse("entry", kwargs={"name": keyword}))
    
    return render(request, "encyclopedia/index.html", {
        "entries": util.list_entries()
    })


def hello(request):
    return HttpResponse('Hello, world')


def entry(request, name):
    # 可选优化：如果条目不存在可以自定义404页，避免直接返回None
    content = util.get_entry(name)
    if content is None:
        return HttpResponse("条目不存在", status=404)
    return HttpResponse(content)


def new(request):
    return render(request, "encyclopedia/new.html", {
        "entries": util.list_entries()
    })


def randomEntry(request):
    entry_list = util.list_entries()
    random_page = random.choice(entry_list)
    # 原随机页逻辑也建议改成重定向，和搜索逻辑保持路径一致
    return redirect(reverse("entry", kwargs={"name": random_page}))

# 原代码中未使用的search函数、searchForm类可直接删除，避免代码冗余

第二步：修改表单配置 #

打开对应HTML模板，将表单提交方法改为get，移除不需要的csrf_token（GET请求无需CSRF校验）：

<h2>Wiki</h2>
<form action="/wiki/" method="get">
    <input class="search" type="text" name="q" placeholder="Search Encyclopedia">
</form>

配置完成后提交搜索，会先请求/wiki/?q=关键词，后端自动返回302重定向到/wiki/关键词，地址栏最终展示效果完全符合预期，和直接访问详情页的路径没有区别。

可选纯前端实现方案（无后端中转） #

如果不想走后端重定向，可以通过JS拦截表单提交事件，直接拼接路径跳转，优势是少一次请求，缺点是依赖浏览器启用JS：

<h2>Wiki</h2>
<form id="wikiSearchForm" action="/wiki/" method="get">
    <input class="search" id="wikiSearchInput" type="text" name="q" placeholder="Search Encyclopedia">
</form>
<script>
const searchForm = document.getElementById('wikiSearchForm');
const searchInput = document.getElementById('wikiSearchInput');
searchForm.addEventListener('submit', function(e) {
    e.preventDefault();
    const keyword = searchInput.value.trim();
    if (keyword) {
        window.location.href = `/wiki/${encodeURIComponent(keyword)}`;
    }
});
</script>

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