Django: обновление информации о странице без перенаправления

Question

У меня есть этот код:

html

<form method="post" id="idForm" name="frm1" action = "/myproject/save/"
 enctype="multipart/form-data">
{% csrf_token %}
....
<input type="submit"  name="save" id="save" value="Save">
</form>

<span class="status">Value: &nbsp;{{ request.mylist}} </span>

js код

$(document).on('submit', '#idForm',function(e){
    $.ajax({
        type: 'POST',
        url: '{% url "myproject:save_form" %}',
        data: {},
        success:function(json){
    $('.status').contents()[0].textContent = data.mylist
        },
        error : function(xhr,errmsg,err) {
    alert("ajax error")
    }
});
});

views

if request.method == 'POST' and 'save' in request.POST:
    print("runs save form")
    mylist= [5]
    return JsonResponse({'mylist':mylist})

Вопрос:

Когда я нажимаю кнопку Сохранить, он перенаправляется на страницу с {"mylist": [5]}

Как сделать так, чтобы обновлялась только часть статуса, Значение?

Answer 1

Вместо этого используйте простую кнопку

<button type="button" onclick="sendData()">Save/button>

<input type="submit" name="save" id="save" value="Save">

Сделайте эту функцию

    function sendData(){
        $.ajax({
            type: 'POST',
            url: '{% url "myproject:save_form" %}',
            data: {
        csrfmiddlewaretoken: '{{ csrf_token }}',
        formdata: JSON.stringify($("#idForm").serialize()) 
},
            success:function(json){
        let result = json.mylist[0];
        $("#status").html(result);
    },
            error : function(xhr,errmsg,err) {
        alert("ajax error")
        } 
}); 
}

Вы также должны передать токен csrfmiddlewaretoken в данных ajax в середину csrf, доверяя вашему запросу.

Вы можете выполнить обновление в обратном вызове ajax success.

Update

На стороне сервера вы можете получить сериализованные данные, как это

if request.method == 'POST' and 'save' in request.POST:
    print("runs save form")
    data=json.loads(request.POST.get('formdata'))
    mylist= [5]
    return JsonResponse({'mylist':mylist})