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
编写的代码如下：

1.    <form method="post">
2.          <div class="form-group">
3.              <label for="start_date">开始时间:</label>
4.              <input type="date" class="form-control" id="start_date" name="start_date" value="{{start_date}}">
6.          </div>
7.          <div class="form-group">
8.              <label for="end_date">结束时间:</label>
9.              <input type="date" class="form-control" id="end_date" name="end_date" value="{{end_date}}">
11.          </div>
13.      <button class="btn btn-primary" onclick="navigateWithDates()">提交</button>
14.    </form>
16. <script>
17. function navigateWithDates() {
18.       var startDate = document.getElementById('start_date').value;
19.       var endDate = document.getElementById('end_date').value;
20.       var url = "{{ url_for('home', page=1, start_date=startDate, end_date=endDate) }}";
21.       window.location.href = url;  }
22. </script>

复制代码

我想通过上面代码中的

1.   var url = "{{ url_for('home', page=1, start_date=startDate, end_date=endDate) }}";
2.   window.location.href = url;  }

复制代码

来实现url的赋值和跳转，然后就碰到了一个题目，url中的 start_date 和end_date并不会实现对应的startDate和endDate的赋值操作！
但是在后端，我获取到的start_date 和end_date值却是前端中startDate和endDate的值，代码如下：

1. start_date = request.form.get('start_date')
2. 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企服之家，中国第一个企服评测及商务社交产业平台。