Как отправить данные методом GET со стороны клиента на сторону сервера - ajax

Я пытаюсь отправить две даты, начальную и конечную, чтобы вернуться назад между двумя датами, вот что я пробовал, но не работает,

$(document).ready(function(){
    const date_inputs = new FormData();
    $('#date_form').submit(function(e){
        date_inputs.append('from',document.getElementById('from').value)
        date_inputs.append('to',document.getElementById('to').value)
        e.preventDefault();
    
    })
    console.log(date_inputs)//returns empty 
    
        function dateTimePrices(){        
            $.ajax({
                type:'GET',
                url:'/prices/dateTime/data',
                data:date_inputs,
                success:function(data){
                    const datetimes = data;
                    spinner.setAttribute('hidden',true);

                    var k = '<tbody>';
                    if(datetimes){
                        k+= '<tr>';
                            k+= '<td>' + datetimes["all_qnt"] + '</td>';
                            k+= '<td>' + datetimes['all_price'] + '</td>';
                        k+= '</tr>'                    
                    }else{
                        k+= '<td class="p-2 text-xs border border-purple-900 md:text-base textpurple" colspan=2>not found</td>'
                    }
                    k+='</tbody>'
                    document.getElementById('datetime_prices_list').innerHTML = k        
                }                
            })        
        }    
        dateTimePrices();    
})
    <form action="" method="GET" id="date_form">

        <div class="col-11 p-1 mt-1 mx-auto text-center row rtl ">
            <p class="col-12 col-sm-6 mx-auto text-left row">
            from 
            <input type="date" class="form-control col-9 mr-1" name="from" id="from"> 
            </p> 
            
            <p class="col-12 col-sm-6 mx-auto text-right row">
                to
                <input type="date" name="to" class="form-control col-9 mr-1" id="to">   
            </p>
            <button type="submit" class="btn btn-info >search</button>
        </div> 
    </form>

я также пробовал создать dataForm, const date_inputs= (new Date(fromDate)).toUTCString(); но он говорит :

Свойство 'append' не существует для типа 'string'.ts(2339)

есть ли возможность добавить ввод даты в dataForm, пожалуйста

и вот мой код представления django

 def priceByDateTime(request):
   start = request.GET.get('from')
   end = request.GET.get('to')
   print(start,end)#
   if start and end:
        datetimes = MyModel.objects.filter(invoice__created_at__range=(start,end)).annotate(
            total_price=Sum(
                (F('price')) - F('discount'),output_field=DecimalField(max_digits=20,decimal_places=3))
        ).annotate(
            total_quantity=(
                Count('pk')
            )
        ).aggregate(
            all_price=Sum(F('total_price')),
            all_qnt=Sum(F('total_quantity'))
        )
    
   else:
        datetimes = MyModel.objects.all().annotate(
            total_price=Sum(
                (F('price')) - F('discount'),output_field=DecimalField(max_digits=20,decimal_places=3))
        ).annotate(
            total_quantity=(
                Count('pk')
            )
        ).aggregate(
            all_price=Sum(F('total_price')),
            all_qnt=Sum(F('total_quantity'))
        )
return JsonResponse(datetimes,safe=False)

@login_required
def queryTemplate(request):
    return render(request,'myapp/prices.html')

заранее спасибо... я очень ценю любую идею ...

Я никогда не работал с jquery, только чистый js и ajax, поэтому я напишу пример на js и ajax

в теге script в вашем шаблоне у вас будет что-то вроде

<script>
function filterDates() {
        const dateFrom = document.getElementById('from').value
        const dateTo = document.getElementById('to').value
        const request = new Request(`path_url?from=${dateFrom}&&to=${dateTo}&&`, {method: 'GET'})
        fetch(request, {
            method: 'GET',
            mode: 'same-origin'
        }).then(
            function (response) {
                console.log(response)
                if (response.status === 200) {
                    console.log("success")
                } else {
                    console.log("error")
                }
            }
        )
    }
</script>

Кое-что я забыл сказать о formData, она может показаться пустой, если вы попытаетесь console.log(formData), но она может содержать данные, я не знаю почему, но это случилось со мной в проходе

Вернуться на верх