Как я могу модулировать этот код, чтобы повторно использовать AJAX в разных HTML-файлах без необходимости каждый раз пер ⇐ Javascript

[Anonymous]

Я отделил свой код JavaScript от файла .html и поместил его в статическую папку, а затем импортировал. Однако после этого изменения мой AJAX перестал работать. Как мне сделать так, чтобы мой ajax.js можно было повторно использовать на разных страницах, не переписывая его?
Это был рабочий код, который занимался редактированием классов, получением и обработкой файлов.Должен отметить, что я работаю над проектом Django, и это первый JS-файл, который я включаю в проект. Идея его разделения заключается в том, чтобы для URL-адреса adicionar_aula можно было использовать одну и ту же функциональность AJAX.
Вот код:
`



Эдитар Аула


Редактировать Аула


{% csrf_token %}

{{ form.as_p }}

Аркивосы для любителей :

{% для arquivo в arquivos_existentes %

{% if arquivo.arquivo %
{{ arquivo.arquivo.name }}
{% else %}
Аркиво недоступно
{% endif %}
Исключить

{% пусто %
[*]Nenhum arquivo adicionado ainda.
{% endfor %}


Дополнительный Arquivo


Сальвар Альтерасойнс


$(document).ready(function() {
// Отправить новые архивы через AJAX
$('#input-arquivo').on('change', function() {
var formData = new FormData();
$.each($(this)[0].files, function(i, file) {
formData.append('arquivo', file);$.each($(this)[0].files, function(i, file) {
formData.append('arquivo', file); p>
});
formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');
$.ajax({
url : '{% url "editar_aula" pk=plano.id %}',  / URL для просмотра редактирования
типа: 'POST',
данные: formData,
processData: false,
contentType: false,< /p>
success: function(response) {
// Добавление нового архива в список архивов, которые можно повторно загрузить на страницу
вар новоАркиво = ответ.novo_arquivo;  // Ожидается, что представление будет возвращено в новый архив
$('#lista-arquivos').append(
`< /p>
${novoArquivo.nome
Исключить
`
);
},
error: function(xhr, status, error) {
alert('Ocorreu um erro ao enviar or arquivo . Tente novamente.');

});
});
// Исключить архивы через AJAX
$(document).on('click', '.excluir-arquivo', function() {
var arquivoId = $( this).data('id');
var listItem = $(this).closest('li');
$.ajax ({
url: '{% url "excluir_arquivo" %}',  / URL-адрес для просмотра исключенного архива
type: 'POST',
data: {
'arquivo_id': arquivoId,
'csrfmiddlewaretoken': '{{ csrf_token }}'
},
успех: функция (ответ) {
// Удаление архива из списка исключены
listItem.remove();
},
ошибка: function(xhr , статус, ошибка) {
alert('Ошибка в исключении или архиве. Tente novamente.');
}
});
});
// Подсчет формул редактирования поля через AJAX
$('#form-editar-aula').on('submit', function(event ) {
event.preventDefault();
var formData = new FormData(this);
$.ajax({
url: $(this).attr('action'),
тип: 'POST',
данные: formData,
processData: false,
contentType: false,
success: function(response) {
alert('Alterações salvas com sucesso!');
window.location.href = '/';   // Перенаправление для начальной страницы после успешного завершения
},
ошибка: функция (хр, статус, ошибка) {
alert('Ocorreu um erro ao salvar as alterações. Tente novamente.');
}});
});
});


`
Я отделил AJAX, создал файл ajax_arquivos.js и импортировал его в HTML. После его разделения ни одна из функций AJAX не работает, хотя файл импортируется корректно, и в консоли я не заметил ничего необычного.
Итак, как мне модульно структурировать этот код? повторно использовать AJAX в разных HTML-файлах без необходимости каждый раз переписывать его?

Подробнее здесь: https://stackoverflow.com/questions/793 ... es-without