Django中AJAX提交表单后跳转结果页并传参问题求助

核心问题 #

1. 提交按钮为type="submit"，点击时会同时触发AJAX请求与表单默认提交行为，导致逻辑冲突
2. views.py中HttpResponseRedirect用法错误：它用于重定向到URL，而非直接返回渲染后的模板内容
3. AJAX请求本身不会自动跳转页面，需手动处理跳转逻辑

修复步骤 #

1. 阻止表单默认提交行为 #

修改按钮类型为button，避免触发表单默认提交：

<form method="POST" action="{% url 'searchresults'%}">
...
<button type="button" onclick="getSearchResults('data1','data2','{{csrf_token}}')">Submit</button>
</form>

2. 修正views.py的返回逻辑 #

替换错误的HttpResponseRedirect，改用render直接返回渲染后的模板：

from django.shortcuts import render

def search_results(request):
    context = {}
    # 根据请求方式获取表单数据
    if request.method == 'POST':
        context['requestData'] = request.POST
    else:
        context['requestData'] = request.GET
    return render(request, 'search/searchresults.html', context)

3. 实现AJAX成功后的页面跳转 #

在AJAX的success回调中手动跳转到结果页，同时携带参数：

function getSearchResults(searchType,executeLocation,csrf_token) 
{
    $.ajax({
        type: 'POST',
        url: "searchresults",
        data : {
            searchType: searchType,
            executeLocation: executeLocation,
            csrfmiddlewaretoken: csrf_token
        },
        success: function() 
        {
            // 跳转到结果页并携带参数
            window.location.href = `/searchresults?searchType=${searchType}&executeLocation=${executeLocation}`;
        },
        error: function(response)
        {
            console.log(response);
            alert('搜索失败，请重试');
        }
    });
}

可选简化方案（无需AJAX） #

如果不需要AJAX预校验逻辑，直接用表单提交更高效：

<form method="GET" action="{% url 'searchresults'%}">
    <input type="hidden" name="searchType" value="data1">
    <input type="hidden" name="executeLocation" value="data2">
    <button type="submit">Submit</button>
</form>

此时views.py通过request.GET获取数据即可。

最终效果 #

• 用户点击提交后会正确跳转至searchresults页面
• 表单数据可在结果页模板中通过{{ requestData.searchType }}、{{ requestData.executeLocation }}访问

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