如何使用 jQuery 或仅使用 Javascript 将按钮重定向到另一个页面

Posted 2023-02-22

【中文标题】如何使用 jQuery 或仅使用 Javascript 将按钮重定向到另一个页面

【英文标题】：How to make a button redirect to another page using jQuery or just Javascript

【发布时间】：2011-01-15 08:28:05

【问题描述】：

我正在制作原型，我希望搜索按钮链接到示例搜索结果页面。

当使用 jQuery 或纯 JS 单击按钮时，如何使按钮重定向到另一个页面。

【问题讨论】：

我要求 js 是因为我没有想到有一个简单的 html 解决方案可用。谢谢它解决了我的目的。

【参考方案1】：

你可以使用：

  location.href = "newpage.html"

在按钮的 onclick 事件中。

【参考方案2】：

$('#someButton').click(function() 
    window.location.href = '/some/new/page';
    return false;
);

【讨论】：

为什么返回false？

如果没有 return false，点击“Enter 或 Return 键”可能只会将您带到当前 url，而不是重定向到新链接。特别有用，当您有一个文本输入控件时，您想在按下回车键时将其发布到不同的 url。

这不是一个很好的解释。返回值指示是否继续处理事件。默认情况下，该事件将继续冒泡，并可能触发其他操作，例如提交表单，或转到链接，或者什么都不做。但是，您真的想在这里“吸收”事件。通过返回false，事件处理将到此结束。

谢谢 - return false 救了我 - 想知道为什么 url 不会改变 - 但可惜其他脚本必须继续处理点击。

【参考方案3】：

这应该可以工作..

$('#buttonID').click(function() window.location = 'new url');

【参考方案4】：

这是你的意思吗？

$('button selector').click(function()
   window.location.href='the_link_to_go_to.html';
)

【讨论】：

根据this ***问答，应该倾向于window.location而不是document.location，因为这不是规范的方式。

【参考方案5】：

你可以使用 window.location

window.location="/newpage.php";

或者您可以让搜索按钮所在的表单具有您想要的页面的操作。

【参考方案6】：

使用简单的 javascript：

<input type="button" onclick="window.location = 'path-here';">

【参考方案7】：

没有脚本：

<form action="where-you-want-to-go"><input type="submit"></form>

更好的是，既然您只是要去某个地方，请向用户展示“只是去某个地方”的标准界面：

<a href="where-you-want-to-go">ta da</a>

虽然，上下文听起来像“模拟用户提交表单的正常搜索”，在这种情况下，第一个选项是要走的路。

【讨论】：

谁会想到一个链接？哈哈

+1 表示表单。因为它最终将是一个合适的搜索表单，如果可能的话，你现在应该这样做。

@suhail — 三倍的代码量和对 JavaScript 的依赖并不好。

@ayjay — 如果提交按钮与表单相关联，则单击提交按钮只会提交表单。将输入放入其中是执行此操作的传统且最受支持的方式。

@mimi — 不，它没有。表单重新提交问题仅在您发出不“安全”的请求时发生（在这种情况下，它应该是一个 POST 表单……但问题是关于简单导航，所以没有理由不认为它是安全的）。浏览器只会在请求可能不安全时警告人们这种可能性（因此在这种情况下他们不会，因为它不是method="POST"）。

【参考方案8】：

在带有 CoffeeScript 的 Rails 3 中，使用不显眼的 JavaScript (UJS)：

添加到assets/javascripts/my_controller.js.coffee:

$ ->
  $('#field_name').click ->
    window.location.href = 'new_url'

内容如下：当 document.ready 事件触发时，向 ID 为 field_name 的 DOM 对象添加一个 onclick 事件，该对象执行 javascript window.location.href='new_url';

【参考方案9】：

不需要javascript，只需将其包装在链接中

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

【讨论】：

Ankur 没有要求有效的 HTML5，他要求为他的原型提供解决方案

【参考方案10】：

您可以使用这个简单的 JavaScript 代码制作搜索按钮以链接到示例搜索结果页面。这里我已经重定向到我主页的'/search'，如果你想从谷歌搜索引擎搜索，你可以使用"https://www.google.com/search" 在表单操作中。

<form action="/search"> Enter your search text: 
<input type="text" id="searchtext" name="q"> &nbsp;
<input onclick="myFunction()" type="submit" value="Search It" />
</form> 
<script> function myFunction() 
 
var search = document.getElementById("searchtext").value; 
window.location = '/search?q='+search; 
 
</script>

【参考方案11】：

这里有很多关于客户端重定向的问题，我不能一概而论……这个是个例外。

重定向不应该来自客户端……它应该来自服务器。如果您无法控制服务器，您当然可以使用 Javascript 选择另一个 URL 去，但是……那不是重定向。重定向是在服务器上使用 300 个状态代码完成的，或者通过在 HTML 中添加 META 标记来完成。

【参考方案12】：

在您的 html 中，您可以将 data 属性添加到您的按钮：

<button type="submit" class="mybtn" data-target="/search.html">Search</button>

然后你可以使用jQuery来改变url：

$('.mybtn').on('click', function(event) 
    event.preventDefault(); 
    var url = $(this).data('target');
    location.replace(url);
);

希望对你有帮助

【讨论】：

2020 : 对我来说最好的答案，因为关于数据目标的一点......谢谢!!!

【参考方案13】：

这是最快（最易读、最简单）的方法，Owens 有效，但它不是合法的 HTML，从技术上讲，这个答案不是 jQuery（但因为 jQuery 是预先准备好的伪代码- 在客户端平台上重新解释为原生 JavaScript - 真的 is 没有 jQuery 这样的东西）

 <button onclick="window.location.href='http://www.google.com';">Google</button>

【参考方案14】：

使用链接并将其设置为按钮样式：

<a href="#page2" class="ui-btn ui-shadow ui-corner-all">Click this button</a>

【参考方案15】：

来自 YT 2012 代码。

<button href="/signin" onclick=";window.location.href=this.getAttribute('href');return false;">Sign In</button>