Ошибка при отправке данных формы в Django просмотров через AJAX

Question

У меня есть форма HTML, которая принимает данные от пользователя. При нажатии на кнопку отправки данные формы необходимо отправить в views.py в формате JSON через AJAX. Я пробовал что-то, но я получаю сообщение об ошибке объект JSON должен быть str, а не 'NoneType' . Данные JSON загружаются в views.py через:

form = json.loads(request.POST.get('form'))

Данные возвращаются в виде словаря под названием «searchdata». Форма:

<form method="POST" id="inputForm">
<div class="container" style="margin-bottom: 50px;width:100%">
  <div class="container-fluid mt-3">

    <div class="card" id="statform">
        <div class="card-header">
          <div class="card-title">
            <div style="font-size: 25px">Filter</div>
          </div>
        </div>
        <br>
      <div class="card-body">
        <div class="row">
          <div class="col-xs-6">
              <div class="col-xs-6">
                    <label name="start_date" class="control-label" style="width:35%">Start date</label>
                    <input type="date" id="start_date" style="color:black;width:100px" ></input>
                </div>
          </div>
          <div class="col-xs-6">
              <label name="end_date" class="control-label" style="width:35%">End Date(Default: Current Date)</label>
              <input style="color:black;width:100px" id="end_date" type="date"></input>

          </div> 
        </div>
        <br>
        <div class="row">
          <div class="col-xs-6">
             <label name="fruit_name" class="control-label"  style="width:35%; padding-left:15px">Select a Fruit</label>
              <select class="js-example-placeholder-single1 js-example-basic-multiple form-control" id="fruit_name" placeholder="Select" style="width:210px" multiple="multiple"> 
              </select>
          </div>
          <div class="col-xs-6">
              <label name="vendor_test" class="control-label" style="width:35%">Select Vendor_TEST</label>
              <select class="js-example-placeholder-single2 js-example-basic-multiple form-control" style="width:210px" id="vendor_test" multiple="multiple">

              </select>             
          </div> 
        </div>
        <div class="row">
          <div class="col-xs-6">
             <label name="release_version" class="control-label" style="width:35%; padding-left:15px">Select Release version</label>
              <select class="js-example-placeholder-single3 js-example-basic-multiple form-control" style="width:210px" id="release_version" multiple="multiple">   
              </select>
          </div>
          <div class="col-xs-6">
              <label class="control-label" style="width:35%">Error Message</label>
              <input type="text" placeholder="Type message here" style="width:210px">             
          </div>
        </div>
        <div class="row">
          <div class="col-xs-6">
             <label class="control-label" style="width:35%; padding-left:15px">Error Message List</label>
              <select class="js-example-placeholder-single4 js-example-basic-multiple form-control" style="width:210px" id = "error_message" multiple="multiple">

              </select>
          </div>
        </div> 
        <div class="text-center">
                <button class="btn btn-md btn-default" type="submit" name="search" value="search" onclick="loadResults()">
                    <i class="fa fa-arrow-circle-right"></i> Submit
                </button>
                <button class="btn btn-md btn-default" type="reset" name="searchreset" value="reset">
                    <i class="fa fa-arrow-circle-right"></i> Reset
                </button>
           </div>
      </div>

    </div> <!--form-->
  </div> <!-- row -->

</div> <!--container main-->
</form> 

Звонок AJAX, который я написал:

$.ajax({
                url : window.location.href,
                type : 'POST',
                cache : false,
                data:{form:JSON.stringify(formdata)},
                success:function(res){
                    if(typeof res.searchdata != 'undefined'){
                        self.$dispatch('searchdataevent',res.searchdata);
                    }
                    if(typeof res.message != 'undefined'){
                        self.message = res.message;
                    }
                     self.loading = false;
                },
                error : function(err){
                    self.message = 'Error communicating with server';
                    self.loading = false;
                }
            }); 

Где я иду не так? Любая помощь приветствуется.