window.location.href 与form method=post 一起使用时需要注意这个问题

最近写了写前端（本人属于前端小白），想实现一个功能，在前端选择时间范围，然后获取这个时间范围内的数据内容，UI如下图：

具体实现细节要求：点击提交按钮后，把开始时间和结束时间的内容作为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"即可！

我的每一篇文章都希望帮助读者解决实际工作中遇到的问题！如果文章帮到了您，劳烦点赞、收藏、转发！您的鼓励是我不断更新文章最大的动力！