如何使用$ .post（）將Jquery變量發送到我的views.py，以及如何在不刷新頁面的情況下檢索它們

Question

我想做的是模態內部的一個步驟表格。 我的步驟1的內容是從數據庫中循環的處理或服務。 當我單擊其中的一個（“ .alert”）（我將BS警報用作按鈕）時，處理ID將存儲在下一步字段設置的隱藏輸入中。 我想要發生的是將該ID發送回我的views.py並進行檢索，這樣我就可以獲得有關治療時間的信息。

我的js中應該發生魔術的函數

    $(".alert").click(function(){

    service_id = $(this).find("input").val();

    current_fs = $(this).parents("fieldset");
    next_fs = $(this).parents("fieldset").next();

    $("#nav li").eq($("fieldset").index(next_fs)).addClass("active");
    $("#nav li").eq($("fieldset").index(current_fs)).removeClass("active");

    current_fs.hide();
    next_fs.show();

    next_fs.find("div").find("input").val(service_id);
    $.post("{% url 'calendarium:data' %}",{id: service_id});

   });

我的views.py

@csrf_exempt
def time(request):
    data = request.POST.get('id','')
    treatment = get_object_or_404(Services, pk = data)
    return render(request,'calendarium/calendar_msform.html',
                                                    {'treatment':treatment})

我的calendar_msform.html

    <fieldset id="#step-2"  style="display: none">

    <div style="display:block;
    border-style:solid;
    border-color:#aa9977;
    border-radius: 5px;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
    padding: 5px">

        <input type="hidden" value="">

        {% if treatment.duration == 30 %}

        <div  class="alert alert-default" style="padding: 2px">


            10:00 - 10:30 am
            <label style="float: right; margin-right: 10px">
            <small>{{ s.duration }} mins</small></label>

        </div>

        {% else %}

        {% endif %}





    </div>

    <input id="backStep1" type="button" name="previous" class="previous 
    action-button-previous" value="Previous"/>
    <input id="toStep3" type="button" name="next" class="next action-button" 
    value="Next"/>
    </fieldset>

我已成功將數據發送回視圖，但無法在html文件中訪問它。 我是jQuery和Django的新手，所以我真的需要幫助。 謝謝。

Answer 1

您需要使用$ .post的響應並相應地更新頁面。 該頁面不會使用視圖返回的HTML自動更新，您必須使用javascript將其放置在某處。 例如，

$.post("{% url 'calendarium:data' %}",{id: service_id}, function(response){
    $('#form-div').html(response);
});

將呈現的html放入ID為“ form-div”的任意div中。 響應是Django視圖返回的輸出。