django GET请求在DELETE之后被触发

7nbnzgx9  于 2023-08-08  发布在  Go
关注(0)|答案(1)|浏览(116)

我第一次在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请求并导致刷新?

i34xakig

i34xakig1#

我通过添加“JavaScript:void(0);“而不是“#”或将其留空。

<a href="javascript:void(0);" class="trash-icon w-inline-block" onclick ="removeduty({{duty.id}})">

字符串

相关问题