DJANGO，从 AJAX 调用返回不更新 html

Question

我正在通过单击选择下拉菜单来更新数据库条目。确认选择后，我将 AJAX POST 发送到另一个视图，该视图在 db 上应用所需的更改并返回到上一页。

问题在于，除非我刷新，否则目标页面不会反映新值。

选择 html (project.html)

<select id="update_status_outreach" name="{{outreach.id}}_____{{project.id}}">
    {% for outreach_status in outreach_statuses %}
        {% if outreach_status.0 == outreach.outreach_status %}
            <option value="{{ outreach.outreach_status }}" selected>{{ outreach.outreach_status }}</option>
        {%else%}
            <option value="{{ outreach_status.0}}">{{outreach_status.0}}</option>
        {% endif %}
    {%endfor%}
</select>

Javascript (project.html)

document.getElementById("update_status_outreach").onchange = changeListener;
function changeListener() {
    var name = this.name.split("_____");
    var project_id = name[1];
    var outreach_id = name[0];
    var new_status = this.value;
    if(confirm("Placejpòdore")) {
        $.ajax({
            type: "POST",
            url: "{% url 'action:update_status_outreach' %}",
            data: {
                csrfmiddlewaretoken: "{{ csrf_token }}",
                'project_id': project_id,
                'outreach_id': outreach_id,
                'new_status': new_status
            },
        });
    }
}

outreach.py​​ 中的update_status_outreach 视图

@login_required(login_url='action:login')
def update_status_outreach(request):
    project_id = request.POST['project_id']
    outreach_id = request.POST['outreach_id']
    new_status = request.POST['new_status']
    jobproject = get_object_or_404(JobProject, id=project_id)
    if jobproject.owner != request.user:
        raise HttpResponse(status=500)
    else:
        outreach_to_be_updated = Outreach.objects.get(id=outreach_id)
        outreach_to_be_updated.outreach_status=new_status
        outreach_to_be_updated.save()
        return HttpResponseRedirect(reverse('action:project', args=(project_id,)))

project.py 中的项目视图

@login_required(login_url='action:login')
def project(request, project_id):
    if request.method == 'POST':
        outreach_id = request.POST.get('outreach_id')
        new_rank = request.POST.get('new_ranking')
        update_rank(outreach_id=outreach_id, new_rank=new_rank)
    project_referred = get_object_or_404(JobProject, id=project_id)
    jobpositions_referred = JobPosition.objects.filter(jobproject=project_referred)
    outreaches_referred = Outreach.objects.filter(position__jobproject=project_referred)
    colors = ['#9bf5ff', '#a89dff', '#fff79d', '#9b5252', '#72b267', '#d75e5e']
    context = {'project': project_referred, 'jobpositions': jobpositions_referred, 'outreaches': outreaches_referred,
               'outreach_statuses': OUTREACH_STATUS, 'colors': colors, 'position_statuses': POSITION_STATUS}
    return render(request, 'action/project.html', context)

提前谢谢你！

Answer 1

首先，您必须将新值从 Django 函数返回到 HTML 文件。然后你需要向你的 ajax 添加一个成功函数，其中 select,option 元素也将被更新。 问题是您在加载网站时创建了一个选择元素，但没有脚本更改 HTML 内容。

$.ajax({
            method: "post",
            dataType: "json",
            data: ...,
            url: "/...",
            success:function(response){
                document.GetElementById("id_of_option").innerHTML = response.your_response
                    
            }
        });