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

[Anonymous]

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

Код: Выделить всё

    

    

    Editar Aula

    





    Editar Aula

    

    

        {% csrf_token %}

        

        {{ form.as_p }}

        

        Arquivos já adicionados:

        [list]

            {% for arquivo in arquivos_existentes %}

                [*]

                    {% if arquivo.arquivo %}

                        [url={{ arquivo.arquivo.url }}]{{ arquivo.arquivo.name }}[/url]

                    {% else %}

                        Arquivo não disponível

                    {% endif %}

                    Excluir

               

            {% empty %}

                [*]Nenhum arquivo adicionado ainda.

            {% endfor %}

        [/list]

        

        Adicionar Arquivo

        

        

        Salvar Alterações

    

    

        $(document).ready(function() {

            // Enviar novos arquivos via AJAX

            $('#input-arquivo').on('change', function() {

                var formData = new FormData();

                $.each($(this)[0].files, function(i, file) {

                    formData.append('arquivo', file);

                });

                formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');

                $.ajax({

                    url: '{% url "editar_aula" pk=plano.id %}',  // URL para a view de edição

                    type: 'POST',

                    data: formData,

                    processData: false,

                    contentType: false,

                    success: function(response) {

                        // Adicionar o novo arquivo na lista de arquivos sem recarregar a página

                        var novoArquivo = response.novo_arquivo;  // Espera-se que a view retorne os dados do novo arquivo

                        $('#lista-arquivos').append(

                            `[*]

                                [url=${novoArquivo.arquivo}]${novoArquivo.nome}[/url]

                                Excluir

                            `

                        );

                    },

                    error: function(xhr, status, error) {

                        alert('Ocorreu um erro ao enviar o arquivo.  Tente novamente.');

                    }

                });

            });

            // Excluir arquivos via AJAX

            $(document).on('click', '.excluir-arquivo', function() {

                var arquivoId = $(this).data('id');

                var listItem = $(this).closest('li');

                $.ajax({

                    url: '{% url "excluir_arquivo" %}',  // URL para a view de excluir arquivo

                    type: 'POST',

                    data: {

                        'arquivo_id': arquivoId,

                        'csrfmiddlewaretoken': '{{ csrf_token }}'

                    },

                    success: function(response) {

                        // Remover o arquivo da lista após exclusão

                        listItem.remove();  

                    },

                    error: function(xhr, status, error) {

                        alert('Ocorreu um erro ao excluir o arquivo. Tente novamente.');

                    }

                });

            });

            // Submeter o formulário de edição de aula via AJAX

            $('#form-editar-aula').on('submit', function(event) {

                event.preventDefault();

                var formData = new FormData(this);

                $.ajax({

                    url: $(this).attr('action'),

                    type: 'POST',

                    data: formData,

                    processData: false,

                    contentType: false,

                    success: function(response) {

                        alert('Alterações salvas com sucesso!');

                        window.location.href = '/';  // Redireciona para a página inicial após o sucesso

                    },

                    error: function(xhr, status, error) {

                        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