Django，我能'；t在管理更改列表视图上使用ajax返回httpresponse数据

现在我在管理员面板中添加了一个按钮，它打开了一个带有pin的表单的模式，我想在警报或模式中返回一个平衡值，但我不能更改admin django return TemplateResponse中的列表视图而不是HttpResponse，当我搜索时，我发现所有示例都使用HttpResponse来转储json数据，顺便说一句，Templateresponse继承自Httpresponse，但我能做些什么来返回这里的余额值是我的

code

注意：我不擅长ajax

---

这是我的管理模板

change_list.html 更改\u list.js 现在表单已提交，并在控制台日志中显示表单已提交，但我无法绘制从视图返回的数据

admin.py 更改\u list.js

{% block object-tools-items %}
        <li><a href="#myModal" role="button" data-toggle="modal">Balance</a></li>



    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Insert your pin</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                      <div class="col-lg-12">
                        <div >
                          <form class="input-group" style="margin-bottom: 15px;" method="post" action="." id="pinform">
                              {% csrf_token %}
                              {{pinform.as_p}}

                            <span class="input-group-btn">
                                <button class="btn btn-default" id="PinInput" type="submit" role="button" data-toggle="modal" data-balance="{{balance}}">Go!</button>
                              </span>
                              </form>
                        </div><!-- /input-group -->
                      </div><!-- /.col-lg-6 -->
                    </div><!-- /.row -->

                </div>
            </div>
        </div>
    </div>
   <div id="balanceModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" >&times;</button>
                <h4 class="modal-title">Balance</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                  <div class="col-lg-12">
                    <div class="input-group" style="margin-bottom: 15px">
                        <p id="balance">{{balance}} EGP</p>

                    </div><!-- /input-group -->
                  </div><!-- /.col-lg-6 -->
                </div><!-- /.row -->

            </div>
        </div>
    </div>
</div>


        {{block.super}}
{% endblock %}

def changelist_view(self, request, extra_context=None):
    extra_context = extra_context or {}

            if request.method == 'POST' and request.is_ajax():
        form = PinForm(request.POST)
        if form.is_valid():
            extra_context['pinform'] = form
            extra_context['balance'] = form.clean_pin()
            response = super(TRANSACTION_DISPLAY, self).changelist_view(request, extra_context=extra_context)
            response['balance'] = form.clean_pin()
            return response

        else:
            extra_context['pinform'] = PinForm
            return super(TRANSACTION_DISPLAY, self).changelist_view(request, extra_context=extra_context)


    else:
        extra_context['pinform'] = PinForm()
        return super(TRANSACTION_DISPLAY, self).changelist_view(request, extra_context=extra_context)

$(document).ready(function() {


    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');

            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
              // Does this cookie string begin with the name we want?
              if (cookie.substring(0, name.length + 1) == (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                  break;
                 }
            }
        }
     return cookieValue;
    }

    $('#pinform').on('submit', function(event){
        event.preventDefault();
        console.log("form submitted!");  // sanity check
        var csrftoken = getCookie('csrftoken');
        var pin = $('#inputPin').val();

        $.ajax({
           url : window.location.href, // the endpoint,commonly same url
           type : "POST", // http method
           crossDomain: false,
           data : { csrfmiddlewaretoken : csrftoken,
                    pin : pin
             }, // data sent with the post request

             // handle a successful response
           success : function(data) {
                // $('#mymodal').modal('hide');
                // $('#balanceModal').modal('show');
                // console.log(data);
                // $('#balance').text(data($('#PinInput').data('balance')));
                return data;
           },

             // handle a non-successful response
             error : function(xhr,errmsg,err) {
             console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
             }
             });
        });});

class PinForm(forms.Form):
    pin = forms.CharField(max_length=32, widget = forms.PasswordInput(attrs={'class': 'form-control',
                                                                             'id': 'inputPin'}), label='')
    def clean_pin(self):
        balance = '200.0' # for simplicity
        return balance

        if request.method == 'POST' and request.is_ajax():
        form = PinForm(request.POST)
        if form.is_valid():
            extra_context['pinform'] = form
            return HttpResponse(json.dumps({'balance': form.cleaned_data['pin']}), content_type='application/json')

    else:
        extra_context['pinform'] = PinForm()
        return super(TRANSACTION_DISPLAY, self).changelist_view(request, extra_context=extra_context)

$.ajax({
       url : window.location.href, // the endpoint,commonly same url
       type : "POST", // http method
       crossDomain: false,
       data : { csrfmiddlewaretoken : csrftoken,
                pin : pin
         }, // data sent with the post request

         // handle a successful response
       success : function(data) {
            $('#myModal .close').click();
            $('#balanceModal').modal('show');
            $('#balance').addClass('lead').text(data['balance']);
       },

         // handle a non-successful response
       error : function(xhr,errmsg,err) {
         console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
         }
         });
    });