>

버튼이있는 장고 템플릿이 있습니다 :

<button type="submit" class="btn btn-primary" onclick="getRota()">Make Rota</button>

getRota () 함수는 아래 스크립트에서 정의되어 있습니다 :

<script>
    function getRota() {
        var startDate = $("input[name='rota_start']").val();
        var endDate = $("input[name='rota_end']").val();
        fetch(`{{ rota_url }}start=${startDate}&end=${endDate}`, {
            method: "GET",
            headers: {
                "X-CSRFToken": getCookie("csrftoken"),
                Accept: "application/json",
                "Content-Type": "application/json"
            }
        })
        .then(response => response.json())
            .then(data => {
                    $("#rota_form").append(`<a href=${data.url} target="_blank">Text Rota</a>`);
                });
    }
</script>

이상한 점은 버튼을 누르면 페이지가 API 요청을하고 링크를 추가 한 다음 (지금까지는 모두 양호 함) 잠시 후 원래 페이지의 URL (api가 아닌)로 이동한다는 것입니다. start=${startDate}&end=${endDate} 와 함께  (api url에서) 그것에 추가되었습니다 ...

이걸로 어디서 시작해야할지 모르겠어요 ...


  • 답변 # 1

    버튼에 type="submit" 가 있습니다  당신은 preventDefault 를 호출하지 않습니다 이므로 양식의 일부가 제출됩니다. 이것은 아마도 당신이보고있는 것을 설명하지만 html 양식을 공유하지는 않지만 GET을 통해 제출하고 start 를 가지고 있다고 생각합니다.  그리고 end  필드.

    아약스를 통해 서버에 직접 제출할 양식이 필요하지 않은 것 같으므로 최소한 3 가지 간단한 수정 사항이 있습니다 :

    type="button" 를 넣어   type="submit" 대신  (와이즈 와이즈)  기본값이므로 생략 할 수 없습니다)

    양식을 완전히 제거하고 입력과 버튼 만 있으면됩니다

    전화 submit  자바 스크립트로 이벤트에

    preventDefault

관련 자료

  • 이전 이진 쓰레기를 실수로 인쇄 한 후 GNU 화면 세션에서 터미널을 어떻게 재설정 할 수 있습니까?
  • 다음 c# - 모듈 식 아키텍처를 설계해야 할 때 객체 캐스팅이 불가피한 현실입니까?