javascript - 장고 템플릿 API 요청으로 인해 페이지에서 검색어 URL로 이동

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

<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에서) 그것에 추가되었습니다 ...

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