如何以 GET 方法将数据从客户端发送到服务器端 - ajax

Posted 2023-02-24

【中文标题】如何以 GET 方法将数据从客户端发送到服务器端 - ajax

【英文标题】：how to send data in GET method from client side to server side - ajax

【发布时间】：2022-01-17 17:17:41

【问题描述】：

我正在尝试发送两个日期，开始日期和结束日期以在两个日期之间返回，这是我尝试过但不起作用的方法，

$(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>

我也试过这个来创建数据表单，const date_inputs= (new Date(fromDate)).toUTCString(); 但它说：

类型'string'.ts(2339) 上不存在属性'append'

请在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')

提前谢谢你.. 我非常感谢任何想法...

【问题讨论】：

糟糕的缩进在这里会产生误导；解决方法是将调用dateTimePrices(); 移动到表单的提交处理函数中。在您的代码中，该函数在页面加载后调用，而不是在提交表单时调用。 （这也是console.log(date_inputs) 无法按预期工作的原因）另外请注意，您可以在提交处理程序中执行date_inputs = $(this).serialize()，这将为您获取 s 的值。

@ChrisG 但是如果我们没有两个日期，我们必须返回所有数据，这就是为什么我没有将函数调用到表单求和中，问题是我可以将两个日期放入数据表格

好的，所以您需要也在提交处理程序中调用dateTimePrices();，否则提交表单并没有真正做任何事情。

@ChrisG ，但我只需要将两个日期添加到 formData 中

您好，要通过get请求发送数据，您需要在url中发送，例如/prices/dateTime/data?from=$date1&to=$date2，使用formdata您必须使用post请求

【参考方案1】：

我从来没有用过jquery，只用过纯js和ajax，所以我会用js和ajax写一个例子

在模板中的脚本标签中，您将拥有类似

<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）它可能是空的，但它可以有数据，我不知道为什么，但它发生在我身上