URL 的查询字符串部分在用作按钮中的链接时被截断答案

【问题标题】：URL's query-string portion is getting cut of when used as a link in a buttonURL 的查询字符串部分在用作按钮中的链接时被截断
【发布时间】：2014-04-20 11:03:11
【问题描述】：

我有以下代码将按钮链接到特定 URL。

stage_link = " 'http://limitless-scrubland-2940.herokuapp.com/game/game.html?stageid=5' "
<form action=stage_link method='get'> 
    <button>Play stage!</button>
</form>

该按钮呈现良好，但它链接到：“http://limitless-scrubland-2940.herokuapp.com/game/game.html”

为什么查询字符串部分 (?stageid=5) 会被截断？是否有可能防止这种情况发生？

【问题讨论】：

标签： javascript html css url

【解决方案1】：

简单。 <form action 不能是 $_GET 查询。如果您必须提交表单，请使用隐藏字段并对其进行测试：

<form method='get' action='http://limitless-scrubland-2940.herokuapp.com/game/game.html' method='get'>
  <input type='hidden' name='stageid' value='5' />
  <input type='submit' value='Play stage!' name='playstage' id='playstage' />
</form>

现在在您的 PHP 页面上测试 $_GET['stageid']。

出于您的目的，您可能只需要：

<a id='playstage' href='http://limitless-scrubland-2940.herokuapp.com/game/game.html?stageid=5'>
  Play stage!
</a>

【讨论】：

我实际上并没有使用 PHP，但你能解释一下如何使用我的按钮使用 input 标记吗？
<button type='button'>text</button> 和 <input type='button' value='text' /> 几乎相同。一个按钮实际上甚至不会提交表单，除非它的type='submit'，这可能是默认的type，这取决于您的浏览器，除非您使用JavaScript 来提交您的表单。如果您不需要提交表单，我的第二个示例可能就是您想要的。您始终可以设置 <a> 标签的样式，例如：#playstage{text-decoration:none;}，添加填充和其他 CSS 功能使其看起来像一个按钮。

【解决方案2】：

<form action="" method='get'> 
    <button>Play stage!</button>
</form>
<script>
document.forms[0].action= "http://limitless-scrubland-2940.herokuapp.com/game/game.html"
var input = document.createElement('input');
input.type = 'hidden';
input.name = 'stageid';
input.value = '5';
document.forms[0].appendChild(input);
</script>

请参阅submitting a GET form with query string params and hidden params disappear 了解原因。

【讨论】：