Ajax возвращает всю HTML-страницу в Django

Я пытаюсь реализовать простую форму, используя bootstrap modal, но всякий раз, когда я отправляю форму, в ответ я получаю целую HTML страницу. Запрос является POST. Я перепробовал почти все ответы, которые есть на StackOverflow, но ни один из них мне не помог.

Код моей модальной формы:

            <div id="alert-box"></div>
            <form id="ajax-form" autocomplete="off">
                {% csrf_token %}
                {{contact_form|crispy}}
                <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </form>

Вот мой код Ajax:

<script type="text/javascript">
    const alertBox = document.getElementById('alert-box');
    const msgForm = document.getElementById('ajax-form');

    const name = document.getElementById('id_name');
    const number = document.getElementById('id_phone_number');
    const message = document.getElementById('id_message');
    const csrf = document.getElementsByName('csrfmiddlewaretoken');
    
    const handleAlerts = (type,text) => {
    alertBox.innerHTML = `<div class="alert alert-${type}" role="alert">
                            ${text}
                        </div>`
    }
    const url = "";
    console.log(csrf);

    msgForm.addEventListener('submit',e => {
        e.preventDefault();
        const fd = new FormData();
        fd.append('csrfmiddlewaretoken',csrf[0].value);
        fd.append('name',name.value);
        fd.append('number',number.value);
        fd.append('message',message.value);

        $.ajax({
            type: 'POST',
            url: url,
            data: fd,
            cache: false,
            contentType: false,
            processData: false,
            enctype: 'multipart/form-data',
            success: function(response) {
                const sText = `${response.name}`;
                handleAlerts('success', sText)
                setTimeout(()=>{
                    alertBox.innerHTML = "";
                    name.value = "";
                    number.value = "";
                    message.value = "";
                }, 5000);
            },
            error: function(error){
                handleAlerts('danger', 'oops..something went wrong')
            }
        })
    });
</script>

Это форма, которую я хочу отправить.

This is my modal form

Вы отправляете ajax-запрос на адрес url, который является пустой строкой:

const url = "";

Добавьте правильный URL вместо пустой строки, и он должен работать.

Вернуться на верх