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>
Это форма, которую я хочу отправить.
Вы отправляете ajax-запрос на адрес url
, который является пустой строкой:
const url = "";
Добавьте правильный URL вместо пустой строки, и он должен работать.