window.location.href 与form method=post 一起使用时必要留意这个题目
https://i-blog.csdnimg.cn/direct/2d454007fdf74da4aa010273182f18f0.png迩来写了写前端（本人属于前端小白），想实现一个功能，在前端选择时间范围，然后获取这个时间范围内的数据内容，UI如下图：
https://i-blog.csdnimg.cn/direct/f48e596be6ba433ca8816f04b05f2dbc.png
具体实现细节要求：点击提交按钮后，把开始时间和结束时间的内容作为url参数提交（目的是与后端举行交互） ，实现如下
http://127.0.0.1:5000/main?page=2&start_date=2024-08-01&end_date=2024-08-22
编写的代码如下：
<form method="post">
<div class="form-group">
<label for="start_date">开始时间:</label>
<input type="date" class="form-control" id="start_date" name="start_date" value="{{start_date}}">
</div>
<div class="form-group">
<label for="end_date">结束时间:</label>
<input type="date" class="form-control" id="end_date" name="end_date" value="{{end_date}}">
</div>
<button class="btn btn-primary" onclick="navigateWithDates()">提交</button>
</form>
<script>
function navigateWithDates() {
var startDate = document.getElementById('start_date').value;
var endDate = document.getElementById('end_date').value;
var url = "{{ url_for('home', page=1, start_date=startDate, end_date=endDate) }}";
window.location.href = url;}
</script> 我想通过上面代码中的
var url = "{{ url_for('home', page=1, start_date=startDate, end_date=endDate) }}";
window.location.href = url; } 来实现url的赋值和跳转，然后就碰到了一个题目，url中的 start_date 和end_date并不会实现对应的startDate和endDate的赋值操作！
但是在后端，我获取到的start_date 和end_date值却是前端中startDate和endDate的值，代码如下：
start_date = request.form.get('start_date')
end_date = request.form.get('end_date') 真是百思不得其解啊，各种网络搜索都没有用果，末了自己出去散散步，放松放松，突然来了灵感！题目出现在了第一句代码 <form method="post">，这个form使用的是post方法（通常使用post方法较多），而上面的代码window.location.href = url; 是只支持get方法的！如果大家想相识怎样在js中实现post方法，可以参考文章：
Js中的window.location.href 只支持get方法，想要实现post方法该怎样处理呢？-CSDN博客
发现了题目，办理就很轻易了，把 <form method="post">中的post 换成"get"即可！
我的每一篇文章都希望资助读者办理实际工作中碰到的题目！如果文章帮到了您，劳烦点赞、收藏、转发！您的鼓励是我不停更新文章最大的动力！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]