在 Django 中的 AJAX POST 请求后重新加载模板

Posted 2023-02-24

【中文标题】在 Django 中的 AJAX POST 请求后重新加载模板

【英文标题】：Reload template after AJAX POST request in Django

【发布时间】：2014-10-20 03:26:07

【问题描述】：

我正在使用 html5 地理定位来获取用户的位置，然后将纬度/经度发送到我的 django 应用程序以查找最近的三所学校。我可以发布纬度/经度，通过函数运行它以获取最近的学校，并在终端中打印出 dict 对象，但模板永远不会重新加载新的 context_dict 数据。

HTML

% csrf_token %
<input id = 'button' type="submit" value="Use current location" onclick = 'find_school()' class="btn btn-default">

JS

function find_school()

function send_off(lat, long)
    var locale = [lat, long];
    console.log(lat, long);
    return locale


navigator.geolocation.getCurrentPosition(function(position) 
    $.ajax(
        type: "POST",
        url: "/schools/search/",
        data: 
            csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value,
            lat_pos: position.coords.latitude,
            long_pos: position.coords.longitude
        ,
        success: function(data)
            console.log(data);
        
    )
);

views.py

def find_school(request):
    context = RequestContext(request)
    search_school_list = search_school_bar()
    if request.GET:
        address = request.GET['q_word']
        close_schools = geolocate(address)
        context_dict = 'close_schools': close_schools, 'search_schools':json.dumps(search_school_list)
    elif request.method == 'POST' and request.is_ajax():
        position = request.POST

        #the geo_search view takes the lat and long
        return geo_search(request, position['lat_pos'],position['long_pos'] )
    else:
        context_dict = 'search_schools':json.dumps(search_school_list)

    return render_to_response('school_data/search.html', context_dict, context)

def geo_search(request, lat, long):
    context = RequestContext(request)
    search_school_list = search_school_bar()

    close_schools = geolocate_gps(lat, long)

    context_dict = 'close_schools': close_schools, 'search_schools':json.dumps(search_school_list)
    #This print statement returns in my terminal the results, and they are correct. I just need to reload the template to display the results.
    print context_dict
    #This isn't re-rendering the page with the correct context_dict. It is doing nothing.
    return render_to_response('school_data/search.html', context_dict, context)

【问题讨论】：

除非重新加载整个页面，否则无法重新加载模板，这会破坏 AJAX 的目的。您需要从 AJAX 调用返回数据并将其动态放入您的页面中（在您的 success 方法内）

我不介意重新加载整个页面，事实上这就是我想要做的 - 当页面重新加载时，我希望结果（geo_search 视图中 context_dict 的内容）提供给我模板。我不知道如何在没有 ajax 的情况下将地理位置信息发送到我的视图之一来处理它。

将地理位置数据保存到隐藏输入并提交表单

我尝试在我的 geo_search 视图中将用户发送到一个新模板：return render_to_response('school_data/geo_search.html', context_dict, context) 但该模板在用户按下后根本不会加载地理定位按钮。

【参考方案1】：

如果您将 render_to_response 的输出返回给 ajax 调用，您将在 javascript 调用中将 HTML 作为“success:function(data)”中的“data”元素返回。如果您的目标是重新加载页面，我认为您不想使用 AJAX。

你应该有类似的东西：

navigator.geolocation.getCurrentPosition(function(position) 
 var form = $('<form action="/geosearch/" method="POST"></form>');
 var long =$('<input name = "long" type="hidden"></input>');
 var lat =$('<input name = "lat" type="hidden"></input>');
 lat.val(position.coords.latitude);
 long.val(position.coords.latitude);
 form.append(lat, long);
 $('body').append(form);
 form.submit();

您在 /geosearch/ 的视图应该采用 post 变量，做任何您想做的事情，然后 render_to_response。

【讨论】：

虽然我没有使用这种确切的方法，但我确实使用了一种变体，将表单输入直接放在 html 页面上。感谢您的提示！

@Isaac Ray 我想要 Point(x,y) 格式的位置 (lat,lng)。而且我在尝试发布时没有设置 csrf cookie 禁止 403 消息。