python - Django - ajax 响应后模板重新加载

Question

我对 Django 不太熟悉，并且遇到了一个问题。我正在向 django View 发送一个 post 请求，并使用 HttpResponse 返回该函数，以便将我的模板的 div 内容更改为从我的 View 传递的值。问题是:一旦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)

base.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()