Django / Ajax-如何过滤和显示基于结果的数据查询表

Question

我正在尝试根据用户在下拉框中所做的选择来过滤和显示Django中的数据。我正在使用ajax调用向Django视图发送请求。例如，当用户选择masterjabatan时，Ajax会将选择的“值”发送给Django后端以过滤数据并将其发送回前端。这是我的代码：

models.py

class Masterjabatan(models.Model):
    jenissistem = models.IntegerField(primary_key=True)
    isskpd = models.IntegerField()
    urut = models.IntegerField()
    urai = models.CharField(max_length=255, blank=True, null=True)

    class Meta:
        managed = False
        db_table = 'masterjabatan'
        unique_together = (('jenissistem', 'isskpd', 'urut'),)

    def __str__(self):
        return self.isskpd

views.py

def masterjabatan(request):
jenissistem = request.GET.get('jenissistem', None)
isspkd = request.GET.get('id', None)
urut = request.GET.get('urut', None)
urai = request.GET.get('urai', None)

cursor = connection.cursor()
cursor.execute("SELECT * FROM masterjabatan where jenissistem='2' and isskpd='0' order by urut asc")
jabatan_list = dictfetchall(cursor)
data = {
'jenissistem': jenissistem,
'isspkd': isspkd,
'urut': urut,
'urai': urai,
'jabatan_list':jabatan_list
}
return render(request, 'konfig/masterjabatan.html', data) 

html模板

<div class="isi-konten">
    <form action="{URL_SAVE}" method="POST" id="myForm" name="myForm">
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 batas-atas" style="margin-bottom:15px;">
            <span>Jenis Jabatan</span>
            <div class="input-group">
                <select id="jns_pejabat" name="jns_pejabat" 
                    onchange="gantiJenisJBTN(this.value)" style="padding:5px; height:30px;">
                    <option value="0">PEJABAT SKPD</option>
                    <option value="1">PEJABAT SKPKD</option>
                </select>
                <input id="url_tabel" type="hidden" style="display:none;" value="/apbd/konfig/masterjabatan/">
            </div>
        </div>
            <div style="padding: 15px !important;">
                <div id="tabel-jenis-jabatan">      
                    <div class="dataTables_scrollBody">
                        <table id="tableJabatan" class="display responsive nowrap" cellspacing="0" width="100%" >
                                    <thead>
                                        <tr>
                                            <th width="8%">URUT</th>
                                            <th>URAI</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    {% for result in jabatan_list %}
                                        <tr>
                                            <td align="center">{{result.urut}}
                                            </td>
                                            <td>
                                                <input type="text" class="input-dlm-tabel" id="urai_0" name="urai[0]" value="{{result.urai}}">
                                            </td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                        </table>
                    </div>
                </div>
            </div>
   </form>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        var table = $('#tableJabatan').DataTable( {
            // "bLengthChange": false, 
            "scrollY": 325,
            "paging": false,
            "searching": false,
        });

        var rowCount = $('#tableJabatan tr').length;
            $('#addRow').on( 'click', function () {
                table.row.add([
                    rowCount,
                    "<input class='input-dlm-tabel' id='input_"+rowCount+"' name='inputan["+rowCount+"]' type='text'>",
                    ]).draw( false );
            $("#input_"+rowCount).focus();
            $('.sorting_1').attr( 'align', 'center' );
                    rowCount++;
            } );
    });
</script>
<script type="text/javascript">
    function gantiJenisJBTN(val){
        //alert(val);
      var url = $("#url_tabel").val();
      $.ajax({
          // type: "POST",
          url: '/apbd/konfig/get_listJabatan/',
          data: {'idnya':val},
          async: false,
          dataType: "json",
          timeout: 10000,
          beforeSend: function() {
            alert(val);
            // $(".cover").show();
          },
          success: function(response){
            alert('responnya='+response);
            $('#tabel-jenis-jabatan').html(response);
            alert(response);
            // $(".cover").hide();
          }
      });
    }
</script>

我对此很陌生。有人可以告诉我这里出了什么问题吗？我需要为此使用Ajax吗？