在使用 django 时，如何在提交表单后在我的 HTML 模板中动态生成 div？

Question

我正在使用 django 构建一个 MCQs Bank，我已经为我的项目创建了所有前端文件，我已经创建了 django 项目，我也在视图中编写了一些函数并创建了一些模型，我还没有创建任何表单，我已经设计了一个页面，其中包含一个按钮，用户单击该按钮并将其重定向到我创建表单的页面，用户可以在该页面的帮助下输入他想要添加的新课程详细信息。现在在重定向的页面上，当用户完成有关课程的详细信息并单击添加课程时，我想将用户返回到上一页，在那里他可以看到他添加的所有课程，并且新课程也必须显示在那里。我想制作一个 div，我想在其中放置所有课程的 div。在用户输入新课程之前，我不想在该 div 中显示任何内容，现在当用户添加新课程时，它应该以 div 的形式显示在包含所有课程的 div 中，现在每次用户输入新课程时当然，我想为所有课程 div 中的新课程创建一个 div。

我试过这个但是我不太了解 django 这是我的第一个项目所以我不知道我是否必须先创建表单处理程序或编写 javascript 来处理动态 div 或用于提交表单的视图进入数据库，我卡住了，请帮忙。

Answer 1

我猜你可以这样使用：

$(document).ready(function() {
    $('#submit-form').on('click', function(e) {
        e.preventDefault();
        var form_data = $('#course-form').serialize();
        $.ajax({
            url: '/add-course/',
            type: 'POST',
            data: form_data,
            success: function(data) {
                // Here we are creating a new div for the new course data
                var new_course_div = $('<div>').addClass('course').text(data.course_name);
                // Here we are Appending the new div to the existing div that contains all the courses
                $('#all-courses').append(new_course_div);
                // And Here we are Clearing the form inputs
                $('#course-form')[0].reset();
            }
        });
    });
});

在这里，#submit-form按钮用于触发表单提交。表单数据使用 $('#course-form').serialize() 进行序列化，并向您最后创建的 /add-course/ URL 或 API 发出 AJAX 请求。

当表单提交成功后，使用服务器返回的数据创建一个新的div元素。

最后，将 div 附加到#all-courses 容器，并使用 $('#course-form')[0].reset() 清除表单输入。

希望这有帮助!!