开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js+原页面刷新

在JavaScript中，实现原页面刷新可以通过多种方式，以下是一些基础概念和方法：

基础概念

页面刷新通常指的是重新加载当前页面，获取最新的资源内容。这在用户操作后需要更新页面数据时非常有用。

相关方法

location.reload()
- 优势：简单易用，直接调用即可刷新页面。
- 类型：无参数时默认从缓存加载，有参数true时强制从服务器重新加载。
- 示例代码：
- 示例代码：

location.href = location.href
- 优势：兼容性好，适用于所有浏览器。
- 类型：通过重新赋值当前URL实现刷新。
- 示例代码：
- 示例代码：
location.assign(location.href)
- 优势：语义清晰，明确表示重新加载当前页面。
- 类型：类似于location.href = location.href。
- 示例代码：
- 示例代码：
history.go(0)
- 优势：利用历史记录刷新页面。
- 类型：通过历史记录栈实现刷新。
- 示例代码：
- 示例代码：

应用场景

表单提交后刷新：用户提交表单后，页面自动刷新以显示提交结果。
数据更新后刷新：用户操作导致数据变化后，页面自动刷新以显示最新数据。
定时刷新：某些页面需要定时刷新以获取最新信息，如股票行情、新闻动态等。

可能遇到的问题及解决方法

刷新导致的用户体验问题：
- 问题：频繁刷新可能导致用户体验不佳。
- 解决方法：合理控制刷新频率，必要时使用局部刷新（如AJAX）代替全页面刷新。

缓存问题：
- 问题：浏览器缓存可能导致页面数据不更新。
- 解决方法：使用location.reload(true)强制从服务器重新加载，或者在URL后添加随机参数避免缓存。
表单重复提交：
- 问题：页面刷新可能导致表单重复提交。
- 解决方法：在表单提交后禁用提交按钮，或者使用重定向（如POST/REDIRECT/GET模式）避免重复提交。

示例代码

以下是一个综合示例，展示了如何在表单提交后刷新页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form Refresh Example</title>
</head>
<body>
    <form id="myForm">
        <input type="text" id="name" name="name" required>
        <button type="submit">Submit</button>
    </form>

    <script>
        document.getElementById('myForm').addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止默认提交行为

            // 模拟表单提交（实际应用中应通过AJAX或表单提交到服务器）
            setTimeout(function() {
                alert('Form submitted successfully!');
                location.reload(); // 提交成功后刷新页面
            }, 1000);
        });
    </script>
</body>
</html>

通过以上方法和示例代码，你可以根据具体需求选择合适的页面刷新方式，并解决可能遇到的问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JSJQuery页面刷新、局部刷新

//div的局部刷新 $(".dl").load(location.href+" .dl"); //全页面的刷新方法 window.location.reload()刷新当前页面....parent.location.reload()刷新父亲对象（用于框架） opener.location.reload()刷新父窗口对象（用于单开窗口） top.location.reload()刷新最顶端对象

5.7K2 0

jquery刷新当前页面、刷新父级页面

jquery刷新当前页面、刷新父级页面 window.location.reload(); // 刷新当前页面 parent.location.reload(); // 刷新父级页面 opener.location.reload...(); // 刷新父窗口页面（用于单开窗口） top.location.reload(); // 刷新最顶端页面（用于多开窗口）补充常用的知识 window.open(); // 打开窗口 window.close...url可打印当前url console.log(window.location.href) // 打印当前url window.open("http://xx.com", "_blank"); // 从新页面打开

3641 0

js实现页面刷新

reload reload 方法，该方法强迫浏览器刷新当前页面。...//前一个页面的URL 不要用 history.go(-1)，或 history.back();来返回并刷新页面，这两种方法不会刷新页面。...: 1，页面自动刷新：把如下代码加入区域中复制代码代码如下: 其中20指每隔20秒刷新一次页面. 2，页面自动跳转...，为了证明下方页面的确被刷新了，在装载完页面弹出一个对话框。...3.页面自动刷新js版 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行] 三、java在写Servler,Action等程序时，要操作返回页面的话（如谈出了窗口，操作完成以后，关闭当前页面

20.5K4 0

JavaScript禁用页面刷新

JavaScript禁用页面刷新代码如下： //禁用F5刷新 document.onkeydown = function () { if (event.keyCode == 116) {...禁止右键弹出菜单 document.oncontextmenu = function () { return false; } 添加完成之后，先情况浏览器缓存查看效果，有的没有效果是因为本地浏览器缓存了页面内容和

4.9K9 0

vue强制刷新页面方法_vue页面回退不刷新

$nextTick(() => { this.isReload = true }) } } } </script 在需要强制刷新的页面引用 export...default { inject: ['reload'], methods: { clickReload() { // 点击之后强制刷新 this.reload()

5K3 0

vue刷新页面的方法_vue局部刷新页面

业务需求/问题描述在项目中经常遇到一个问题，例如新增完表单数据和需要重新刷新页面。类似的业务还有很多。...l o c a t i o n . r e l o a d ( ) 和 t h i s . router.go利用 history 中前进和后退的功能，传入 0 刷新当前页面。...但是这种方式，重新刷新当前页，如果这个页面文件比较大，白屏时间比较长，会影响用户体验。...location.reload()和this. router.go利用history中前进和后退的功能，传入0刷新当前页面。...但是这种方式，重新刷新当前页，如果这个页面文件比较大，白屏时间比较长，会影响用户体验。

2.7K2 0

javascript 页面后退并刷新

javascript做页面后退常使用的方法是 window.history.back(); 这样确实可以做到后退的功能，但是项目中，常常并不只是后退就能完成需求，往往需要在后退的同时，刷新后退的页面信息...，比如后退到首页同时刷新首页的最新数据，这样的需求通过上面这种方法就没法满足了，为了实现这个需求，我们需要使用到 document.referrer 这个方法可以取到上一个页面的具体路径，我们通过这个方法...，再结合JS的跳转函数 window.location.href 就可以实现后退并且刷新的效果的，完整代码如下： window.location.href=document.referrer; 发布者

2.7K4 0

自动刷新页面

说明：有人说，我可以使用来刷新当前页面，为什么要用这个脚本呢？是的，的确是这样。但是这个脚本可以在状态栏显示剩余的时间。不管怎样，随您的便。...如果将window.location.reload()改成window.location.href="http://www.yahoo.com"等地址，可以在规定时间到来后指向任意的页面。

2.4K5 0

html如何只刷新页面指定,js控制页面刷新 JS刷新当前页面的几种方法总结

JS页面如何实现刷新指定DIV。。。其他DIV不刷新将innerHTML所在的方法用一个单独的函数写出来，然后需要时再调用。...js实现进入页面先刷新在继续进行js的功能 js实现，进入页面先刷新一下，然后在执行之后js代码需要完成的工作 js或者jquery实现固定时间刷新页面 js怎么写2秒后再刷新当前页面设置定时2秒后执行刷新...setTimeout(function(){ //使用 setTimeout()方法设定定时2000毫秒window.location.reload();//页面刷新},2000); 如何让html页面实现每次刷新的时候重新执行...JS刷新当前页面的几种方法总结 reload 方法，该方法强迫浏览器刷新当前页面。...true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5(“刷新”) replace 用js操作怎样实现刷新当前页面而不改变请CSS布局HTML小编今天和大家分享头按F5

13.8K3 0

Vue刷新当前页面

$router.go(0) 这个姿势是利用了 history 中前进和后退的功能，传入 0 刷新当前页面。但是有一个问题就是页面整个刷新过程中会白屏，严重影响用户的体验感，效果不好。 this....$router.go(0) 姿势二：location.reload() 这个姿势是利用了直接使用刷新当前页面的方法。...但是同样存在有一个问题就是页面整个刷新过程中会白屏，严重影响用户的体验感，效果也是不好，和姿势一的现象一直，也不推荐使用。...先把移除，移除后再重新添加，达到刷新当前页面的功能。是目前最合适的实现方式。...this.reload()// 需要刷新页面

2.8K6 0

JS 刷新页面

这与用户单击浏览器的刷新按钮的效果是完全一样的。如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。...这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。

11.6K2 0

js跳转页面并刷新(本页面跳转)

history.back();//不刷新页面 2、Javascript刷新页面的常用方法： [javascript] view plain copy print?...自动刷新页面的方法: 1.页面自动刷新：把如下代码加入区域中其中20指每隔20秒刷新一次页面. 2.页面自动跳转...3.页面自动刷新js版 [javascript] view plain copy print?...刷新框架的脚本语句 //如何刷新包含该框架的页面用 [javascript] view plain copy print?... ) //如何刷新另一个框架的页面用 [javascript] view plain copy print?

23K1 0

vue页面强制刷新缓存不清除_vuex刷新页面数据

this.enterPage() }, destroyed(){ this.leavePage() }, methods: { /* 打开:load 关闭:beforeload+unload 刷新...window.removeEventListener('unload', e => this.onunload(e)) window.removeEventListener('load', e => this.load(e)) }, //页面进入监听...unload', e => this.onunload(e)) window.addEventListener('load', e => this.load(e)) } }, //页面刷新...("auth") localStorage.setItem('page','关闭') }else { localStorage.setItem('page','刷新

3.2K3 0

页面窗口改变,自动刷新页面

原生js提供了自动刷新和窗口改变的方法,本次介绍一下窗口改变时候执行自动刷新!本次demo配合一个随机数来观察转化页面的变化! demo实例 <!...window.onresize=function(){ window.location.reload(); rand();//窗口改变执行函数 } rand();//打开页面先进行函数执行...} 方法说明： window.onload这个都知道是待页面元素全部加载完毕后执行...js代码 window.onresize这个是窗口页面改变时候执行，就是窗口大小改变的事件 window.location.reload()刷新当前页面，加上window这个对象，表面对当前可视化窗口刷新...为了方便观察页面是否正确刷新，onsreize事件内执行一个随机数（数学对象），当页面窗口改变，页面随机数发生改变，执行成功！

3K1 0

js刷新页面

如何实现刷新当前页面呢？借助js你将无所不能。 1，reload 方法，该方法强迫浏览器刷新当前页面。...//前一个页面的URL 不要用 history.go(-1)，或 history.back();来返回并刷新页面，这两种方法不会刷新页面。...: 1，页面自动刷新：把如下代码加入区域中代码如下: 其中20指每隔20秒刷新一次页面. 2，页面自动跳转...1.页面自动刷新：把如下代码加入区域中其中20指每隔20秒刷新一次页面. 2.页面自动跳转：把如下代码加入...3.页面自动刷新js版三、java在写Servler,Action等程序时，要操作返回页面的话（如谈出了窗口，操作完成以后，关闭当前页面，刷新父页面）代码如下: 1 PrintWriter

17.4K5 0

fasadmin选项卡页面单独刷新表格数据但不刷新页面

遇到的问题，在一个选项卡中自定义了一个按钮，点击后会更新数据，想要表格数据更新，但不想让页面一起刷新，就借助页面上的刷新按钮实现，Ajax成功后调用下按钮点击事件，具体代码在下面。 ...Fast.api.ajax(url, '重新加入队列'); Layer.close(index); $(".btn-refresh").click();//刷新列表...} ); }); 核心代码就是这一句选项卡页面单独刷新表格数据但不刷新页面调用页面上的刷新按钮的点击事件 $(“.btn-refresh”).click();//刷新列表...未经允许不得转载：肥猫博客 » fasadmin选项卡页面单独刷新表格数据但不刷新页面

2.1K2 0

列表页面指向原

在引用公共html页面时，为了便于知道当前所处的页面，我们往往在当前的页面采用特定的样式（如在当前页面的列表中加active class）,实现原理是当a 的href的属性与document.location.href

5471 0

PHP 实现回退页面并刷新

PHP 实现回退页面并刷新 ---- // 回退页面不刷新 // echo "alert('回退页面不刷新!')...;history.back();"; // 回退页面并刷新 - 通过按钮触发 // echo '回退页面并刷新'; // 回退页面并刷新 - 直接触发 // echo "alert('回退页面并刷新!')..."';"; // 回退页面并刷新 - 直接触发 header('Location: ' . $_SERVER["HTTP_REFERER"]);

4.6K4 0

js刷新当前页面方法

js刷新当前页面 js刷新当前页面在写JS代码时，用到JS来刷新当前页面的方法有几种，比如最常用的reload()，location 等 reload 方法，该方法强迫浏览器刷新当前页面。...因为这种做法就像是客户端点F5刷新页面，所以页面的method=”post”的时候，会出现”网页过期”的提示。那是因为Session的安全保护机制。...//前一个页面的URL 不要用 history.go(-1)，或 history.back();来返回并刷新页面，这两种方法不会刷新页面。...: 1.页面自动刷新：把如下代码加入区域中其中20指每隔20秒刷新一次页面. 2.页面自动跳转：把如下代码加入区域中　或　刷新如何刷新另一个框架的页面用 <script language=JavaScript

12K2 0

jqGrid 关闭刷新父页面数据

子页面提交方法: function commit(){ var data = $("#pwd").serialize(); $.post("#",data,function(data)... var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); }) } 父窗口数据刷新再关闭

3.8K10 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭