如何使输入 type = 按钮像超链接一样使用 get 请求进行重定向？

如何使 <input type=button>像超链接一样使用 GET请求进行重定向？

964505 次浏览
小开

有几种不同的方法可以做到这一点——首先，简单地把它放在一个指向您想要它去的地方的表单中:

<form action="/my/link/location" method="get">
<input type="submit" value="Go to my link location"
name="Submit" id="frm1_submit" />
</form>

这样做的好处是即使没有打开 javascript 也可以工作。

其次，在 javascript 中使用一个独立的按钮:

<input type="submit" value="Go to my link location"
onclick="window.location='/my/link/location';" />

然而，这在没有 JavaScript 的浏览器中会失败(注意: 这是 真的的错误做法——你应该使用事件处理程序，而不是像这样的内联代码——这只是最简单的方式来说明我所说的这类事情

第三种选择是像按钮一样设计一个实际的链接:

<style type="text/css">
.my_content_container a {
border-bottom: 1px solid #777777;
border-left: 1px solid #000000;
border-right: 1px solid #333333;
border-top: 1px solid #000000;
color: #000000;
display: block;
height: 2.5em;
padding: 0 1em;
width: 5em;
text-decoration: none;
}
// :hover and :active styles left as an exercise for the reader.
</style>


<div class="my_content_container">
<a href="/my/link/location/">Go to my link location</a>
</div>

这样做的好处是可以在任何地方工作，还有的意思是你最可能希望它意味着什么。

小开

不要这样做。我可能想用猴子的血来开车。我有我的理由，但是有时候坚持按照设计的方式使用东西是更好的，即使它不是“绝对完美”匹配你所追求的外观。

为了支持我的论点，我提出以下观点。

  • 看看这个图片是如何缺少底部的状态栏的。这个链接使用的是 onclick="location.href"模型。(这是我的前辈的一个实际生产例子)这可能会让用户在点击链接时犹豫不决，因为对于初学者来说，他们不知道链接会把他们带到哪里。

Image

你也使得搜索引擎优化变得更加困难，同时也使得调试和阅读代码/HTML 变得更加复杂。提交按钮应该提交表单。为什么您(开发社区)应该尝试创建一个非标准的 UI？

小开 
    <script type="text/javascript">
<!--
function newPage(num) {
var url=new Array();
url[0]="http://www.htmlforums.com";
url[1]="http://www.codingforums.com.";
url[2]="http://www.w3schools.com";
url[3]="http://www.webmasterworld.com";
window.location=url[num];``
}
// -->
</script>
</head>
<body>
<form action="#">
<div id="container">
<input class="butts" type="button" value="htmlforums" onclick="newPage(0)"/>
<input class="butts" type="button" value="codingforums" onclick="newPage(1)"/>
<input class="butts" type="button" value="w3schools" onclick="newPage(2)"/>
<input class="butts" type="button" value="webmasterworld" onclick="newPage(3)"/>
</div>
</form>
</body>

这是另一种方法，比另一种更简单。

<input id="inp" type="button" value="Home Page" onclick="location.href='AdminPage.jsp';" />

这样更简单。

小开

你可以使用 <button>标签来做这样的动作:

<a href="http://www.google.com/">
<button>Visit Google</button>
</a>

或:

<a href="http://www.google.com/">
<input type="button" value="Visit Google" />
</a>

它很简单，不需要 javascript！

注意:

从 HTML 结构来看，这种方法是无效的。但是，它适用于许多现代浏览器。参见以下参考文献:

小开

我觉得这就是你的需要。

a href="#" onclick="document.forms[0].submit();return false;"
小开

对于那些从搜索(谷歌)偶然发现这一点，并试图翻译成。NET 和 MVC 代码。(就像我的情况一样)

@using (Html.BeginForm("RemoveLostRolls", "Process", FormMethod.Get)) {
<input type="submit" value="Process" />
}

这将显示一个标签为“ Process”的按钮，并将您带到“/Process/RemoveLostRolls”。 如果没有“ FormMethod. Get”，它会工作，但会被视为一个“ post”。


提交答案