Отправка формы Django без обновления

Заранее спасибо. Я знаю, что это уже спрашивали несколько раз. Но после прочтения предыдущих вопросов, чтения и понимания учебников по JSON и AJAX формам, я все еще не могу найти способ не обновлять сайт после отправки формы. Я буду очень признателен, если кто-нибудь из вас с более глубокими знаниями JavaScript сможет помочь.

Это рассылка в нижней части главной страницы, которая просто запрашивает имя и email и сохраняет информацию в базе данных, она работает идеально, и я просто хотел бы ответить сообщением с подтверждением без обновления, потому что он отвечает на сообщение, но пользователь должен снова перейти в нижнюю часть страницы, чтобы увидеть его, что совсем не практично.

HTML является

<div id="contact_form">
                                            <div class="Newsletter">                                                        
                                                 <form id="form" enctype="multipart/form-data" method="POST" action="" style="text-align: left;">
                                                    {% csrf_token %}
                                                    <div class="fields">
                                                         <div class="fields">
                                                    <label for="name" id="name_label">Name</label>
                                                    <input type="text" name="name" minlength="3" placeholder="e.g. John Smith" id="name" required>
                                                        </div>
                                                        <div class="fields">
                                                    <label for="email" id="email_label">Email</label>
                                                    <input type="email" name="email" placeholder="e.g. john@example.com" id="email"  required>
                                                        </div>
                                                        
                                                        
                                                    </div>
                                                <div class="submit">
                                                <button type='submit' id="submit" >Subscribe</button>
                                               </div>   
                                               {% include 'messages.html' %}
                                                </form>
                                            </div>
                                        </div>

Представление индекса

def index(request):
    """View function for home page of site."""
    if request.method == 'POST':
        form = NewsUserForm(request.POST)
        if form.is_valid():
            instance = form.save(commit=False) #we do not want to save just yet    
            if NewsUsers.objects.filter(email=instance.email).exists():
                messages.warning(request, 'Your email already exists in the newsletter database')
            else: 
                instance.save()
                messages.success(request, 'Great! Your email has been submitted to our database.')  
                try:
                    send_mail('Welcome ', 'Thank you for subscribing to the Newsletter. ', 'user123@gmail.com',[instance.email], fail_silently=False)                 
                except BadHeaderError: #add this
                    return HttpResponse('Invalid header found.') #add this  
    form = NewsUserForm()
    return render(request, 'index.html', {'form':form})

Большинство руководств предлагают создать другое представление + url для этого представления + код ajax

Я попробовал вот это отсюда (https://pytutorial.com/how-to-submit-a-form-with-django-and-ajax#top) без успеха, также устранил "post" в html методе, но все равно не работает, даже информация, полученная из формы, появляется в url. Любая помощь будет приветствоваться, большое спасибо.

jquery неудачный код

    $('#form').on('submit', function(e){
             
         e.preventDefault();
         

         
           $.ajax({
                type : "POST", 
                url: "{% url 'index' %}",
                data: {
                 name : $('name').val(),
                 email : $('email').val(),
                 csrfmiddlewaretoken: '{{ csrf_token }}',
                 dataType: "json",
         
                },
                
                success: function(data){
                   $('#output').html(data.msg) /* response message */
                },
         
                failure: function() {
                    
                }
         
         
            });
         
         
         });    

неудачная функция просмотра ajax и url

def ajax_posting(request):
    if request.is_ajax():
        name = request.POST.get('name', None) # getting data from first_name input 
        email = request.POST.get('email', None)  # getting data from last_name input
        if name and email: #cheking if first_name and last_name have value
            response = {
                         'msg':'Your form has been submitted successfully' # response message
            }
            return JsonResponse(response) # return response as JSON

#path('ajax-posting/', views.ajax_posting, name='index'),# ajax-posting / name = that we will use in ajax url

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