我如何将用户从一个页面转向另一个页面,使用jQuery或纯粹的JavaScript?
当前回答
基本上,jQuery只是一个JavaScript框架,在这种情况下,你只能使用纯粹的JavaScript,所以在这种情况下,你有3个选项使用VanillaJavaScript:
使用位置替换,这将取代当前页面历史,这意味着无法使用后按钮返回原始页面。
window.location.replace("http://stackoverflow.com");
2) 使用位置指定,这将为您保存历史,并使用返回按钮,您可以返回原始页面:
window.location.assign("http://stackoverflow.com");
3)我建议使用上述方式之一,但这可能是使用纯粹的JavaScript的第三个选项:
window.location.href="http://stackoverflow.com";
您也可以在 jQuery 中编写一个函数来处理它,但不推荐,因为它只是一个线纯的JavaScript函数,如果您已经在窗口范围内,也可以使用上面的所有函数没有窗口,例如 window.location.replace(“http://stackoverflow.com”);可以是 location.replace(“http://stackoverflow.com”);
我在下面的图像中展示了所有这些:
此分類上一篇
其他回答
jQuery 代码重新引导页面或 URL
您甚至可以直接将 URL 转移到 attr() 方法,而不是使用变量。
第二条路
window.location.href="http://stackoverflow.com";
你也可以编码如下(两者都是内部相同的):
window.location="http://stackoverflow.com";
第三种方式
第四条路
Location.assign() 方法将新文档上传到浏览器窗口中。
window.location.assign("http://stackoverflow.com");
第五条路
如 attr() 方法( jQuery 1.6 引入后)
var url = “http://stackoverflow.com”; $(位置)。prop('href', url);
您可以使用下面的方法重新引导页面:
使用头部中的 meta 标签 - <meta http-equiv="refresh" content="0;url=http://your-page-url.com" />. 请注意,内容="0;... 使用了几秒钟后你需要重新引导页面 使用 JavaScript: window.location.href = "http://your-page-url.com"; 使用 jQuery: $(location).attr('href', 'http://yourPage.com/');
使用 location.replace() 将重定向您,但没有保存前一页的历史。
但是,如果你想保持你的历史,你必须使用 location.href=//path。
例子:
// Form with steps
document.getElementById('#next').onclick = function() {
window.location.href='/step2' // Iteration of steps;
}
// Go to next step
document.getElementById('#back').onclick = function() {
window.history.back();
}
// Finish
document.getElementById('#finish').onclick = function() {
window.location.href = '/success';
}
// On success page
window.onload = function() {
setTimeout(function() {
window.location.replace('/home'); // I can't go back to success page by pressing the back button
},3000);
}
如果您想在同一应用程序中重新引导到路线
window.location.pathname = '/examplepath'
这将是走路的方式。
如果你正在尝试生成包数据,有几个选项,你如何做到这一点,你可以生成单独的链接,每个页面你想能够直接到。
<a href='/path-to-page?page=1' class='pager-link'>1</a>
<a href='/path-to-page?page=2' class='pager-link'>2</a>
<span class='pager-link current-page'>3</a>
...
请注意,示例中的当前页面在代码和CSS中以不同的方式处理。
如果您希望通过 AJAX 更改已支付的数据,这就是 jQuery 会进入的地方. 您所做的就是将一个点击处理器添加到相应不同页面的每个 anchor 标签. 这个点击处理器会引用一些 jQuery 代码,并通过 AJAX 获取下一个页面并更新新数据的表。
$(document).ready( function() {
$('a.pager-link').click( function() {
var page = $(this).attr('href').split(/\?/)[1];
$.ajax({
type: 'POST',
url: '/path-to-service',
data: page,
success: function(content) {
$('#myTable').html(content); // replace
}
});
return false; // to stop link
});
});
推荐文章
- 在React Native中使用Fetch授权头
- 为什么我的球(物体)没有缩小/消失?
- 如何使用jQuery检测页面的滚动位置
- if(key in object)或者if(object. hasownproperty (key)
- 一元加/数字(x)和parseFloat(x)之间的区别是什么?
- angularjs中的compile函数和link函数有什么区别
- 删除绑定中添加的事件监听器
- 如何在JSON中使用杰克逊更改字段名
- 很好的初学者教程socket.io?
- HtmlSpecialChars在JavaScript中等价于什么?
- React: 'Redirect'没有从' React -router-dom'中导出
- 如何在React中使用钩子强制组件重新渲染?
- 我如何使用Jest模拟JavaScript的“窗口”对象?
- 我如何等待一个承诺完成之前返回一个函数的变量?
- 在JavaScript中根据键值查找和删除数组中的对象