Question

我有一个包含按钮的Django模板：

<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网址）...

我什至不知道从哪里开始...

Answer 1

该按钮包含type="submit"，而您没有呼叫preventDefault，因此该按钮所包含的表单已提交。这可能可以解释您所看到的内容，尽管您不共享html表单-我猜它是通过GET提交的，并且具有start和end字段。

由于看起来您不需要将表单直接提交到服务器（通过ajax进行操作），因此至少有3个非常简单的修复程序：

放置type="button"而不是type="submit"（submit是默认设置，因此您不能就忽略它）
完全删除表单，仅包含输入和按钮
在您的Javascript中致电preventDefault

Django模板。 API请求导致页面导航到查询URL

1 个答案: