使用相同的输入结果JS / HTML重定向到新页面
[英]Redirect to new page with same input results JS/HTML
问题描述
I'm getting stuck on this I hope someone can help me. 
我对此感到困惑，希望有人能帮助我。
I have made a filter that displays the input and filters when you press the filter button. 我制作了一个过滤器，当您按下过滤器按钮时，它会显示输入和过滤器。
When I press the filter button I want to get redirected to another web page and display (Input typed and filter results) the results there. 当我按下过滤器按钮时，我想重定向到另一个网页并在其中显示（输入输入和过滤结果）结果。 How can I do this? 我怎样才能做到这一点？
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } #myInput { background-image: url('/css/searchicon.png'); background-position: 10px 12px; background-repeat: no-repeat; width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; } #myUL { list-style-type: none; padding: 0; margin: 0; } #myUL li a { border: 1px solid #ddd; margin-top: -1px; /* Prevent double borders */ background-color: #f6f6f6; padding: 12px; text-decoration: none; font-size: 18px; color: black; display: block } #myUL li a:hover:not(.header) { background-color: #eee; } </style> </head> <body> <h2>My Phonebook</h2> <input type="text" id="myInput" placeholder="Search for names.." title="Type in a name"> <button onclick="myfilter(), mydisplay();">Filter</button> Search results for <span id="demo"></span> <hr> <ul id="myUL"> <li><a href="#">Adele</a></li> <li><a href="#">Agnes</a></li> <li><a href="#">Billy</a></li> <li><a href="#">Bob</a></li> <li><a href="#">Calvin</a></li> <li><a href="#">Christina</a></li> <li><a href="#">Cindy</a></li> </ul> <script> function myfilter() { var input, filter, ul, li, a, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); ul = document.getElementById("myUL"); li = ul.getElementsByTagName("li"); for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].style.display = "none"; } } } function mydisplay() { var x = document.getElementById("myInput").value; document.getElementById("demo").innerHTML = x; } </script> </body> </html>
3 个解决方案
解决方案1
1 2018-04-21 19:57:06
It depends on what do you mean by saying "...get redirected to another web page...": 这取决于您说“ ...重定向到另一个网页...”是什么意思：
If you mean a URL (location) redirection, than you should: 如果您是指URL（位置）重定向，那么您应该：
- Add your input text into URL query params 将输入文本添加到URL 查询参数中
- Redirect to this updated URL 重定向到此更新的URL
- On new page load complete (ex. "onload" event), read the query params and put inside the filter input box. 在新页面加载完成时 （例如“ onload”事件），阅读查询参数并将其放在过滤器输入框中。
- Call to filter method as if user clicked the [filter] button 调用过滤器方法 ，就像用户单击[过滤器]按钮一样
解决方案2
1 2018-04-21 20:04:10
I think you should use <form> with GET method to pass the searched text to server-side. 我认为您应该将<form>与GET方法一起使用，以将搜索到的文本传递到服务器端。 This form should call itself. 此表格应自称。 Once the form is submitted (you have to have an <input> element with type=submit) a new page is loaded with GET information. 提交表单后（必须具有type = submit的<input>元素），新页面将加载GET信息。 Then you can write any code to filter the table either on server-side or client-side. 然后，您可以编写任何代码来过滤服务器端或客户端上的表。
Good luck 祝好运
解决方案3
1 已采纳 2018-04-21 20:08:12
You can store it in sessionStorage , which is preserved between pages of the same domain in the same browsing session. 您可以将其存储在sessionStorage ，该存储在同一浏览会话中相同域的页面之间保留。
So, on one page you go: 因此，您可以在一页上进行以下操作：
window.sessionStorage.setItem('foo', 'bar');
And then, on the other page, you can write: 然后，在另一页上，您可以编写：
var value = window.sessionStorage.getItem('foo');
The variable value will now contain "bar" . 变量value现在将包含"bar" 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.