django GET请求在DELETE之后被触发

我第一次在Django中创建一个Web应用程序，其中一个功能是添加和编辑空缺。一些信息是使用表单和POST方法添加的（空缺的标题，描述等），其他字段是使用Fetch API动态添加和删除到DOM和数据库（职责，优惠，优势）。
当加载编辑空缺视图时，职责、提供和优势以及表单数据从数据库中预先加载。
当试图从编辑空缺视图中删除预先加载的职责、提议和优势时，就会出现问题。当我发送一个DELETE请求时，在编辑视图中有东西触发了GET，导致所有内容重新加载。这不是理想的，因为所有先前的用户输入都消失了。
这只发生在编辑视图中，新的空缺视图可以按预期工作，可以添加和删除动态字段，而无需刷新页面。
如何防止removeduty的DELETE请求触发GET on edit？为什么会发生这种情况？

视频演示：
预期行为：link（在添加新空缺时有效。添加和删除项目时不刷新。日志按预期显示PUT和DELETE请求。）：
bug：link（页面当前在编辑视图中的行为。删除项目后刷新页面。DELETE请求后面紧跟着一个不需要的GET请求）：
编辑views.py：

@login_required(login_url="/login")
def edit(request,id):
    if request.method =="POST":
        vacancy = Vacancy.objects.get(pk=id)

        newtitle = request.POST['title']
        newcity = request.POST['city']
        newcountry = request.POST['country']
        newimage = request.FILES.get('image')
        newdescription = request.POST['description']

        vacancy.title = newtitle
        vacancy.city = newcity
        vacancy.country = newcountry
        vacancy.description = newdescription

        if newimage:
            vacancy.image = newimage

        vacancy.save()

        if vacancy.image:
            return HttpResponseRedirect(reverse("dashboard"))
        else:
            return render(request,'app/cms-edit.html',{
                'vacancy': vacancy,
                'imagemessage': 'Please add an image'
            })
        
    if request.method=="GET":
        vacancy = Vacancy.objects.get(pk=id)
        title = vacancy.title
        city = vacancy.city
        country = vacancy.country
        description = vacancy.description
        image = vacancy.image
        
        duties = Duty.objects.filter(vacancy=vacancy)
        offers = Offer.objects.filter(vacancy=vacancy)
        advantages = Advantage.objects.filter(vacancy=vacancy)
        
        return render(request,'app/cms-edit.html',{
            'vacancy': vacancy,
            'duties':duties,
            'offers':offers,
            'advantages':advantages,
        })

字符串

removeduty views.py：

@csrf_exempt   
def removeduty(request,id):
    duty = Duty.objects.get(pk=id)
    if request.method == "DELETE":
        duty.delete()
        return JsonResponse({"message":"duty deleted"})
    else:
        return JsonResponse({"message":"duty not deleted"})

型

removeduty JavaScript

//remove duty
    function removeduty(dutyid) {
        let csrftoken = getCookie('csrftoken');
        let parent = document.getElementById(`dutyitem-${dutyid}`);
        parent.remove()
    
        fetch(`removeduty/${dutyid}`, {
            method: 'DELETE',
            headers: { "X-CSRFToken": csrftoken }
        })
        .then(response => response.json())
        .then(result => {
            console.log(result.message);

        })
        .catch(error => {
            console.error('Error deleting duty:', error);
        });
    }

型

编辑空缺html的相关部分

<div id="dutysection" class="dutyitems">
            {% if duties %}
            {% for duty in duties%}
              <div class="cms-added-item" id="dutyitem-{{duty.id}}">
                <p class="cms-added-list-item">{{duty.text}}</p>
                <div class="action-wrap-app">
                  <a href="" class="trash-icon w-inline-block" onclick ="removeduty({{duty.id}})">
                    <div class="delete w-embed"><svg width="auto" height="32" viewbox="0 0 36 39" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.0841 29.526L18.0363 23.4738L24.0504 29.526L26.8744 26.6641L20.9102 20.5999L26.8744 14.5358L24.0504 11.6619L18.0363 17.726L12.0841 11.6619L9.22219 14.5358L15.2124 20.5999L9.22219 26.6641L12.0841 29.526ZM6.87654 38.8597C5.85041 38.8597 4.94768 38.4732 4.16834 37.7002C3.38904 36.9272 2.99939 36.0253 2.99939 34.9945V6.51948H0.746094V2.65428H11.157V0.798828H24.8657V2.65428H35.2765V6.51948H33.0233V34.9945C33.0233 36.0253 32.6356 36.9272 31.8603 37.7002C31.085 38.4732 30.1802 38.8597 29.1461 38.8597H6.87654Z" fill="currentColor"></path>
                      </svg></div>
                  </a>
                </div>
              </div>
            {% endfor%}
            {% else %}
            {% endif %}
          </div>

型

相关url模式

path("edit/<int:id>",views.edit,name="edit"),
    path("edit/addduty/<int:id>",views.addduty,name="addduty"),
    path("edit/removeduty/<int:id>",views.removeduty,name="removeduty"),
    path("edit/addoffer/<int:id>",views.addoffer,name="addoffer"),
    path("edit/removeoffer/<int:id>",views.removeoffer,name="removeoffer"),
    path("edit/addadvantage/<int:id>",views.addadvantage,name="addadvantage"),
    path("edit/removeadvantage/<int:id>",views.removeadvantage,name="removeadvantage"),

型
下面是removeduty函数运行时发生的情况的日志。您可以看到，它在编辑时触发GET，导致其刷新。但为什么呢？
[07/Aug/2023 09：03：47]“DELETE /edit/removeduty/202 HTTP/1.1”200 27
[07[2019 - 05 - 22 09：03：47]“GET /edit/250 HTTP/1.1”200 8895

**编辑：**我尝试为编辑视图添加另一个if条件，以返回if request.method ==“DELETE”，看看这是否会阻止它发生，但没有任何效果。

我怀疑这个问题可能与我设置URL模式的方式有关。我为编辑视图创建了单独的模式，因为常规模式不起作用。
以下是用于从添加新空缺视图创建项目的URL模式（按预期工作）

path("addduty/<int:id>",views.addduty,name="addduty"),
path("removeduty/<int:id>",views.removeduty,name="removeduty"),
path("addoffer/<int:id>",views.addoffer,name="addoffer"),
path("removeoffer/<int:id>",views.removeoffer,name="removeoffer"),
path("addadvantage/<int:id>",views.addadvantage,name="addadvantage"),
path("removeadvantage/<int:id>",views.removeadvantage,name="removeadvantage"),

型
这是否会导致某种冲突，从而触发GET请求并导致刷新？

django GET请求在DELETE之后被触发

1条答案

相关问题

热门标签

最新问答