Django - шаблон перезагружается после ответа ajax

Question

Я новичок с Django, и я столкнулся с проблемой. Я отправляю запрос на публикацию в django view и возвращаю функцию обратно с HttpResponse, чтобы изменить содержимое div моего шаблона на переданное значение из моего представления. Проблема заключается в следующем: один раз ajax отвечает и изменяет значение div; страница мгновенно перезагружается. Ребята, вы понимаете, почему?

Views.py

def index(request):
if request.is_ajax():
    print("request is ajax")
    details = request.POST.get('id')
    return HttpResponse(details)
else:
    return HttpResponse("Failed)

база. html

<button id="checkres">Check result</button>
<form name="testform" id="testform" method="post">
    {% csrf_token %}
    <input type="text" id="rowfield">
    <input type="submit">
</form>

 $("#testform").submit(function (event){
    $row_num = $('#rowfield').val()
    $("#responseresult").text('checking');
    $.ajax({
        type: "POST",
        url: "/bot",
        data: {csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(), id: $row_num},
        success: function(data){
            $("#responseresult").text(data);
            alert(data);
        }
    });
});

Answer 1

Ваше javascript submit событие не вызывает event.preventDefault(), поэтому после ответа ajax происходит обновление. Измените вашу javascript функцию на:

 $("#testform").submit(function (event){
    $row_num = $('#rowfield').val()
    $("#responseresult").text('checking');
    $.ajax({
        type: "POST",
        url: "/bot",
        data: {csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(), id: $row_num},
        success: function(data){
            $("#responseresult").text(data);
            alert(data);
        }
    });
    <b>event.preventDefault();</b> // prevents the page from refreshing.
});

Подробнее о preventDefault()

Answer 2

Попробуйте это для вашего просмотра

def index(request):
if request.is_ajax():
    print("request is ajax")
    details = request.POST.get('id')
    return JsonResponse(details, safe=False)
else:
    return JsonResponse("Failed" safe=False)

Вы также должны запретить отправку.

 $("#testform").submit(function (event){
    $row_num = $('#rowfield').val()
    $("#responseresult").text('checking');
    $.ajax({
        type: "POST",
        url: "/bot",
        data: {csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(), id: $row_num},
        success: function(data){
            $("#responseresult").text(data);
            alert(data);
        }
    });
    event.preventDefault(); // prevents the page from refreshing.
});