Django crispy input from Ajax data

I need to Auto-fill up the crispy fields so I called the needed data from my database using ajax function as:

views.py

def load_record(request):
    PUITS_id = request.GET.get('PUITS')
    record = SurveillanceDesPuits.objects.filter(PUITS_id__id__exact=PUITS_id)[:1]
    my_record= [str(record[0].PUITS) , str(record[0].MODE), str(record[0].CS)]
    print(my_record)
    return render(request, 'measure/Surveill_Wells/Add_wellMntr.html', {'record': my_record})

And my HTML file is :

    <form method="POST" id="SurveillanceDesPuits_F" data-record-url="{% url 'ajax_load_record' %}">
        {% csrf_token %}
          <!-- form  from views.py-->
        <div class="border p-2 mb-3 mt-3 border-secondary">
                    <div class="form-row">
                <div class="form-group col-md-3 mb-0">
                    {{ form.PUITS|as_crispy_field }}
                </div>
                <div class="form-group col-md-3 mb-0">
                    {{ form.CS|as_crispy_field }}
                </div>
                <div class="form-group col-md-3 mb-0">
                    {{ form.MODE|as_crispy_field }}
                </div>
            </div>
        </div>
        <input class="btn btn-success mb-4" type="submit" value="ADD Record">
    </form>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
  $("#id_PUITS").change(function () {
    var url = $("#SurveillanceDesPuits_F").attr("data-record-url");  
    var PUITSId = $(this).val();  
    $.ajax({                       
      url: url,                    
      data: {
        'PUITS': PUITSId       
      },
      success: function (data) {   
        $("#id_MODE").html(data);
      }
    });
  });
</script>

After selecting an item (PUITS) from the dropdown list, I want to set the value of CS and MODE automatically from the received data. so in the console, it gives me this error:

    File "D:\WikiPED\venv\lib\site-packages\crispy_forms\templatetags\crispy_forms_filters.py", line 102, in as_crispy_field
    raise CrispyError("|as_crispy_field got passed an invalid or inexistent field")
crispy_forms.exceptions.CrispyError: |as_crispy_field got passed an invalid or inexistent field
[07/Sep/2021 17:30:05] "GET /ajax/load-record/?PUITS=1 HTTP/1.1" 500 25693

what I missed in this code? Thanks

I changed the views.py as:

def load_record(request):
    PUITS_id = request.GET.get('PUITS')
    record = SurveillanceDesPuits.objects.filter(PUITS_id__id__exact=PUITS_id)[:1]
    return JsonResponse({'record2': list(record2.values())}, safe=False)

the scripts will be:

<script type="text/javascript">
    $.ajax({ 
        type: 'GET' ,               
        url: url,              
        data: {'PUITS': PUITSId },
        dataType: "json",
        success: function (response){           
            const object = response.record2[0]
            $("#id_PUITS").val(object.PUITS_id);
            $("#id_DATE_TEST").val(object.DATE_TEST);
            $("#id_MODE").val(object.MODE);
            $("#id_CS").val(object.CS);
            $("#id_SITUATION").val(object.SITUATION);
            $("#id_DUSE").val(object.DUSE);
            $("#id_PRES_TBG").val(object.PRES_TBG);
            $("#id_PRES_CSG").val(object.PRES_CSG);
            $("#id_PRES_AVD").val(object.PRES_AVD);
            $("#id_RESEAU_GL").val(object.RESEAU_GL);
            $("#id_ANNULAIRE_TECH").val(object.ANNULAIRE_TECH);
            $("#id_OBSERVATION").val(object.OBSERVATION);
            $("#id_Controle_Pression_ENSP").val(object.Controle_Pression_ENSP);
            $("#id_Test_Puits").val(object.Test_Puits);
            $("#id_Controle_Pression_DP").val(object.Controle_Pression_DP);
        },

        });
        return false;
        });
</script>