如何使用jQuery刷新页面?代码示例

2021年3月23日15:25:06 发表评论 936 次浏览

方法1:使用location.reload():location.reload()方法重新加载当前网页, 模拟在浏览器上单击刷新按钮。传递给该方法的可选true参数用于强制从服务器加载页面并忽略浏览器缓存。

语法如下:

location.reload(true)

例子:

<!DOCTYPE html>
< html >
  
< head >
     < title >
         How to refresh a page
         using jQuery?
     </ title >
      
     < script src =
         "https://code.jquery.com/jquery-3.3.1.min.js" >
     </ script >
</ head >
  
< body >
     < h1 style = "color: green" >
         lsbin
     </ h1 >
      
     < b >
         How to refresh a page
         using jQuery?
     </ b >
      
     < p >
         lsbin is a computer science
         portal with a huge variety of well
         written and explained computer science
         and programming articles, quizzes
         and interview questions.
     </ p >
      
     < button type = "button" >
         Button to Reload page
     </ button >
  
     < script type = "text/javascript" >
         $(document).ready(function () {
             $("button").click(function () {
                 location.reload(true);
                 alert('Reloading Page');
             });
         });
     </ script >
</ body >
  
</ html >

方法2:使用history.go(0):history.go()方法根据传递给它的参数从浏览器的历史记录中加载URL。如果传递的参数为" 0", 则会重新加载当前页面。

语法如下:

history.go(0);

例子:

<!DOCTYPE html>
< html >
  
< head >
     < title >
         How to refresh a page
         using jQuery?
     </ title >
      
     < script src =
         "https://code.jquery.com/jquery-3.3.1.min.js" >
     </ script >
</ head >
  
< body >
     < h1 style = "color: green" >
         lsbin
     </ h1 >
      
     < b >
         How to refresh a page
         using jQuery?
     </ b >
      
     < p >
         lsbin is a computer science
         portal with a huge variety of well
         written and explained computer science
         and programming articles, quizzes
         and interview questions.
     </ p >
      
     < button type = "button" >
         Button to Reload page
     </ button >
  
     < script type = "text/javascript" >
         $(document).ready(function () {
             $("button").click(function () {
                 history.go(0);
                 alert('Reloading Page');
             });
         });
     </ script >
</ body >
  
</ html >

方法3:在当前页面上使用location.replace:可以将location.replace()方法与location.pathname作为参数一起使用。 location.pathname返回当前网址, 并将其传递给location.replace()重新加载当前页面。

语法如下:

location.replace(location.pathname);

例子:

<!DOCTYPE html>
< html >
  
< head >
     < title >
         How to refresh a page
         using jQuery?
     </ title >
      
     < script src =
         "https://code.jquery.com/jquery-3.3.1.min.js" >
     </ script >
</ head >
  
< body >
     < h1 style = "color: green" >
         lsbin
     </ h1 >
      
     < b >
         How to refresh a page
         using jQuery?
     </ b >
      
     < p >
         lsbin is a computer science
         portal with a huge variety of well
         written and explained computer science
         and programming articles, quizzes
         and interview questions.
     </ p >
      
     < button type = "button" >
         Button to Reload page
     </ button >
  
     < script type = "text/javascript" >
         $(document).ready(function () {
             $("button").click(function () {
                 location.reload(true);
                 alert('Reloading Page');
             });
         });
     </ script >
</ body >
  
</ html >

输出如下:

在单击按钮之前:

reload前

单击按钮后:

reload后

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: