Làm cách nào tôi có thể làm mới một trang với jQuery?

Làm cách nào tôi có thể làm mới một trang với jQuery?

Sử dụng location.reload():

$('#something').click(function() {
    location.reload();
});

Các reload()chức năng phải mất một tham số tùy chọn có thể được thiết lập để truebuộc một tải lại từ máy chủ chứ không phải là bộ nhớ cache. Tham số mặc định là false, do đó, theo mặc định, trang có thể tải lại từ bộ đệm của trình duyệt.

Điều này sẽ hoạt động trên tất cả các trình duyệt ngay cả khi không có jQuery:

location.reload();

Có nhiều cách không giới hạn để làm mới một trang bằng JavaScript:

1. location.reload()
2. history.go(0)
3. location.href = location.href
4. location.href = location.pathname
5. location.replace(location.pathname)

6. location.reload(false)

   Nếu chúng ta cần kéo tài liệu từ máy chủ web một lần nữa (chẳng hạn như khi nội dung tài liệu thay đổi linh hoạt), chúng ta sẽ chuyển đối số dưới dạng true.

Bạn có thể tiếp tục danh sách sáng tạo:

• window.location = window.location
• window.self.window.self.window.window.location = window.location
• ... và 534 cách khác

var methods = [
  "location.reload()",
  "history.go(0)",
  "location.href = location.href",
  "location.href = location.pathname",
  "location.replace(location.pathname)",
  "location.reload(false)"
];

var $body = $("body");
for (var i = 0; i < methods.length; ++i) {
  (function(cMethod) {
    $body.append($("<button>", {
      text: cMethod
    }).on("click", function() {
      eval(cMethod); // don't blame me for using eval
    }));
  })(methods[i]);
}

button {
  background: #2ecc71;
  border: 0;
  color: white;
  font-weight: bold;
  font-family: "Monaco", monospace;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.5s ease;
  margin: 2px;
}
button:hover {
  background: #27ae60;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Rất nhiều cách sẽ hoạt động, tôi cho rằng:

• window.location.reload();
• history.go(0);
• window.location.href=window.location.href;

Để tải lại một trang với jQuery, hãy làm:

$.ajax({
    url: "",
    context: document.body,
    success: function(s,x){
        $(this).html(s);
    }
});

Cách tiếp cận ở đây mà tôi đã sử dụng là Ajax jQuery. Tôi đã thử nghiệm nó trên Chrome 13. Sau đó, tôi đặt mã trong trình xử lý sẽ kích hoạt tải lại. Các URL là "", có nghĩa trang này .

Nếu trang hiện tại được tải bởi yêu cầu POST, bạn có thể muốn sử dụng

window.location = window.location.pathname;

thay vì

window.location.reload();

bởi vì window.location.reload()sẽ nhắc xác nhận nếu được gọi trên một trang được tải bởi yêu cầu POST.

Câu hỏi nên là,

Cách làm mới trang bằng JavaScript

window.location.href = window.location.href; //This is a possibility
window.location.reload(); //Another possiblity
history.go(0); //And another

Bạn tha hồ lựa chọn.

Bạn có thể muốn sử dụng

location.reload(forceGet)

forceGet là một boolean và tùy chọn.

Mặc định là false tải lại trang từ bộ đệm.

Đặt tham số này thành true nếu bạn muốn buộc trình duyệt lấy trang từ máy chủ để thoát khỏi bộ đệm.

Hoặc chỉ

location.reload()

nếu bạn muốn nhanh chóng và dễ dàng với bộ nhớ đệm.

Ba cách tiếp cận với các hành vi liên quan đến bộ đệm khác nhau:

• location.reload(true)

  Trong các trình duyệt triển khai forcedReloadtham số location.reload(), tải lại bằng cách tìm nạp một bản sao mới của trang và tất cả các tài nguyên của nó (tập lệnh, biểu định kiểu, hình ảnh, v.v.). Sẽ không phục vụ bất kỳ tài nguyên nào từ bộ đệm - nhận bản sao mới từ máy chủ mà không gửi bất kỳ if-modified-sincehoặcif-none-match tiêu đề nào trong yêu cầu.

  Tương đương với người dùng thực hiện "tải lại cứng" trong các trình duyệt khi có thể.

  Lưu ý rằng việc chuyển trueđến location.reload()được hỗ trợ trong Firefox (xem MDN ) và Internet Explorer (xem MSDN ) nhưng không được hỗ trợ phổ biến và không phải là một phần của thông số W3 HTML 5 , cũng không phải là thông số HTML W3 dự thảo , cũng không phải là Tiêu chuẩn sống WHATWG HTML .

  Trong các trình duyệt không hỗ trợ, như Google Chrome, location.reload(true)hoạt động giống như location.reload().

• location.reload() hoặc là location.reload(false)

  Tải lại trang, tìm nạp bản sao HTML mới, không được lưu trong bộ nhớ cache của HTML và thực hiện các yêu cầu xác nhận lại RFC 7234 cho bất kỳ tài nguyên nào (như tập lệnh) mà trình duyệt đã lưu vào bộ nhớ cache, ngay cả khi chúng còn mới là RFC 7234 cho phép trình duyệt phục vụ chúng mà không cần xác nhận lại.

  Chính xác làm thế nào trình duyệt nên sử dụng bộ đệm của nó khi thực hiện location.reload()cuộc gọi không được chỉ định hoặc ghi lại theo như tôi có thể nói; Tôi xác định hành vi trên bằng thử nghiệm.

  Điều này tương đương với người dùng chỉ cần nhấn nút "refresh" trong trình duyệt của họ.

• location = location(hoặc vô cùng nhiều kỹ thuật có thể khác liên quan đến việc gán locationhoặc cho các thuộc tính của nó)

  Chỉ hoạt động nếu URL của trang không chứa một mảnh / hashbang!

  Tải lại trang mà không cần tải lại hoặc xác nhận lại bất kỳ tài nguyên mới nào từ bộ đệm. Nếu bản thân HTML của trang mới, điều này sẽ tải lại trang mà không thực hiện bất kỳ yêu cầu HTTP nào.

  Điều này tương đương (từ phối cảnh bộ đệm) cho người dùng mở trang trong một tab mới.

  Tuy nhiên, nếu URL của trang chứa hàm băm, điều này sẽ không có hiệu lực.

  Một lần nữa, hành vi lưu trữ ở đây là không xác định theo như tôi biết; Tôi xác định nó bằng cách thử nghiệm.

Vì vậy, tóm lại, bạn muốn sử dụng:

• location = locationđể sử dụng tối đa bộ đệm, miễn là trang không có hàm băm trong URL của nó, trong trường hợp này, trang này sẽ không hoạt động
• location.reload(true)để tìm nạp các bản sao mới của tất cả các tài nguyên mà không cần xác nhận lại (mặc dù nó không được hỗ trợ toàn cầu và sẽ hoạt động không khác với location.reload()một số trình duyệt, như Chrome)
• location.reload() để trung thực tái tạo hiệu ứng của người dùng nhấp vào nút 'refresh'.

window.location.reload() sẽ tải lại từ máy chủ và sẽ tải lại tất cả dữ liệu, tập lệnh, hình ảnh, v.v.

Vì vậy, nếu bạn chỉ muốn làm mới HTML, window.location = document.URLnó sẽ trả về nhanh hơn nhiều và có ít lưu lượng truy cập hơn. Nhưng nó sẽ không tải lại trang nếu có hàm băm (#) trong URL.

Hàm jQuery Loadcũng có thể thực hiện làm mới trang:

$('body').load('views/file.html', function () {
    $(this).fadeIn(5000);
});

Vì câu hỏi là chung chung, chúng ta hãy cố gắng tổng hợp các giải pháp có thể cho câu trả lời:

Giải pháp JavaScript đơn giản :

Cách dễ nhất là giải pháp một dòng được đặt theo cách thích hợp:

location.reload();

Điều mà nhiều người đang thiếu ở đây, vì họ hy vọng sẽ nhận được một số "điểm" là chính hàm reload () cung cấp Boolean dưới dạng tham số (chi tiết: https://developer.mozilla.org/en-US/docs/Web / API / Vị trí / tải lại ).

Phương thức Location.reload () tải lại tài nguyên từ URL hiện tại. Tham số duy nhất tùy chọn của nó là Boolean, khi nó đúng, khiến trang luôn được tải lại từ máy chủ. Nếu nó sai hoặc không được chỉ định, trình duyệt có thể tải lại trang từ bộ đệm của nó.

Điều này có nghĩa là có hai cách:

Giải pháp1: Buộc tải lại trang hiện tại từ máy chủ

location.reload(true);

Giải pháp2 : Tải lại từ bộ đệm hoặc máy chủ (dựa trên trình duyệt và cấu hình của bạn)

location.reload(false);
location.reload();

Và nếu bạn muốn kết hợp nó với jQuery để nghe một sự kiện, tôi khuyên bạn nên sử dụng phương thức ".on ()" thay vì ".click" hoặc các trình bao bọc sự kiện khác, ví dụ: một giải pháp phù hợp hơn sẽ là:

$('#reloadIt').on('eventXyZ', function() {
    location.reload(true);
});

Đây là một giải pháp tải lại không đồng bộ một trang bằng jQuery. Nó tránh sự nhấp nháy gây ra bởi window.location = window.location. Ví dụ này cho thấy một trang tải lại liên tục, như trong bảng điều khiển. Nó được thử nghiệm chiến đấu và đang chạy trên TV hiển thị thông tin ở Quảng trường Thời đại.

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <meta http-equiv="refresh" content="300">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    <script>
    function refresh() {
      $.ajax({
        url: "",
        dataType: "text",
        success: function(html) {
          $('#fu').replaceWith($.parseHTML(html));
          setTimeout(refresh,2000);
        }
      });
    }
    refresh();
    </script>
  </head>
  <body>
    <div id="fu">
      ...
    </div>
  </body>
</html>

Ghi chú:

• Việc sử dụng $.ajaxtrực tiếp như $.get('',function(data){$(document.body).html(data)}) nguyên nhân khiến các tệp css / js bị lỗi bộ nhớ cache , ngay cả khi bạn sử dụng cache: true, đó là lý do tại sao chúng tôi sử dụngparseHTML
• parseHTMLsẽ KHÔNG tìm thấy bodythẻ để toàn bộ cơ thể bạn cần thêm một div, tôi hy vọng một chút kiến ​​thức này sẽ giúp bạn một ngày nào đó, bạn có thể đoán chúng tôi đã chọn id cho điều đó như thế nàodiv
• http-equiv="refresh"Chỉ sử dụng trong trường hợp xảy ra sự cố với javascript / máy chủ bị trục trặc, sau đó trang sẽ VẪN tải lại mà không cần bạn nhận được một cuộc gọi điện thoại
• Cách tiếp cận này có thể rò rỉ bộ nhớ bằng cách nào đó, http-equivlàm mới sửa chữa mà

tôi đã tìm thấy

window.location.href = "";

hoặc là

window.location.href = null;

cũng làm cho một trang làm mới.

Điều này làm cho nó dễ dàng hơn rất nhiều để tải lại trang loại bỏ bất kỳ băm. Điều này thật tuyệt khi tôi đang sử dụng AngularJS trong trình giả lập iOS, do đó tôi không phải chạy lại ứng dụng.

Bạn có thể sử dụng phương pháp JavaScript location.reload() . Phương pháp này chấp nhận một tham số boolean. truehoặc false. Nếu tham số là true; trang luôn được tải lại từ máy chủ. Nếu có false; đó là mặc định hoặc với trình duyệt tham số trống tải lại trang từ bộ đệm của nó.

Với truetham số

<button type="button" onclick="location.reload(true);">Reload page</button>

Với default/ falsetham số

 <button type="button" onclick="location.reload();">Reload page</button>

Sử dụng jquery

<button id="Reloadpage">Reload page</button>
<script type="text/javascript">
    $('#Reloadpage').click(function() {
        location.reload();
    }); 
</script>

Bạn không cần bất cứ thứ gì từ jQuery, để tải lại một trang bằng JavaScript thuần túy , chỉ cần sử dụng chức năng tải lại trên thuộc tính vị trí như thế này:

window.location.reload();

Theo mặc định, điều này sẽ tải lại trang bằng bộ đệm của trình duyệt (nếu có) ...

Nếu bạn muốn buộc tải lại trang, chỉ cần chuyển một giá trị thực để tải lại phương thức như bên dưới ...

window.location.reload(true);

Ngoài ra nếu bạn đã ở trong phạm vi cửa sổ , bạn có thể thoát khỏi cửa sổ và thực hiện:

location.reload();

sử dụng

location.reload();

hoặc là

window.location.reload();

Sử dụng onclick="return location.reload();"trong thẻ nút.

<button id="refersh-page" name="refersh-page" type="button" onclick="return location.reload();">Refesh Page</button>

Nếu bạn đang sử dụng jQuery và muốn làm mới, thì hãy thử thêm jQuery của bạn vào hàm javascript:

Tôi muốn ẩn iframe khỏi một trang khi nhấp vào oh h3, đối với tôi nó hoạt động nhưng tôi không thể nhấp vào mục cho phép tôi xem iframebắt đầu trừ khi tôi làm mới trình duyệt theo cách thủ công ... không lý tưởng.

Tôi đã thử như sau:

var hide = () => {
    $("#frame").hide();//jQuery
    location.reload(true);//javascript
};

Trộn Jane javascript đơn giản với jQuery của bạn sẽ hoạt động.

// code where hide (where location.reload was used)function was integrated, below    
    iFrameInsert = () => {
        var file = `Fe1FVoW0Nt4`;
        $("#frame").html(`<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/${file}\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe><h3>Close Player</h3>`);
        $("h3").enter code hereclick(hide);
}

// View Player 
$("#id-to-be-clicked").click(iFrameInsert);

Tất cả các câu trả lời ở đây là tốt. Vì câu hỏi chỉ định về việc tải lại trang vớijquery, Tôi chỉ nghĩ thêm một cái gì đó nhiều hơn cho độc giả tương lai.

jQuery là một thư viện JavaScript đa nền tảngđược thiết kế để đơn giản hóa kịch bản lệnh phía máy khách của HTML.

^{~ Wikipedia ~}

Vì vậy, bạn sẽ hiểu rằng nền tảng của jquery, hoặc là jquery được dựa trên javascript. Vì vậy, đi với tinh khiếtjavascript là cách tốt hơn khi nói đến những điều đơn giản.

Nhưng nếu bạn cần một jquery giải pháp, đây là một.

$(location).attr('href', '');

Có nhiều cách để tải lại các trang hiện tại, nhưng bằng cách nào đó sử dụng các cách tiếp cận đó bạn có thể thấy trang được cập nhật nhưng không có vài giá trị bộ đệm sẽ có, vì vậy hãy khắc phục vấn đề đó hoặc nếu bạn muốn thực hiện các yêu cầu khó thì hãy sử dụng mã dưới đây.

    location.reload(true);
    //Here, it will make a hard request or reload the current page and clear the cache as well.


    location.reload(false); OR location.reload();
    //It can be reload the page with cache

<i id="refresh" class="fa fa-refresh" aria-hidden="true"></i>

<script>
$(document).on('click','#refresh',function(){
   location.reload(true);
});
</script>

Giải pháp Javascript đơn giản:

 location = location; 

<button onClick="location = location;">Reload</button>

Có lẽ ngắn nhất (12 ký tự) - lịch sử sử dụng

history.go()

Bạn có thể viết nó theo hai cách. Thứ nhất là cách tải lại trang tiêu chuẩn còn được gọi là làm mới đơn giản

location.reload(); //simple refresh

Và một cái khác được gọi là làm mới cứng . Ở đây bạn chuyển biểu thức boolean và đặt nó thành true. Điều này sẽ tải lại trang phá hủy bộ đệm cũ hơn và hiển thị nội dung từ đầu.

location.reload(true);//hard refresh

Nó là ngắn nhất trong JavaScript.

window.location = '';

$(document).on("click", "#refresh_btn", function(event) 
{
     window.location.replace(window.location.href);
});

Dưới đây là một số dòng mã bạn có thể sử dụng để tải lại trang bằng jQuery .

Nó sử dụng trình bao bọc jQuery và trích xuất phần tử dom gốc.

Sử dụng điều này nếu bạn chỉ muốn cảm giác jQuery về mã của mình và bạn không quan tâm đến tốc độ / hiệu suất của mã.

Chỉ cần chọn từ 1 đến 10 phù hợp với nhu cầu của bạn hoặc thêm một số chi tiết dựa trên mẫu và câu trả lời trước đó.

<script>
  $(location)[0].reload(); //1
  $(location).get(0).reload(); //2
  $(window)[0].location.reload(); //3
  $(window).get(0).location.reload(); //4
  $(window)[0].$(location)[0].reload(); //5
  $(window).get(0).$(location)[0].reload(); //6
  $(window)[0].$(location).get(0).reload(); //7
  $(window).get(0).$(location).get(0).reload(); //8
  $(location)[0].href = ''; //9
  $(location).get(0).href = ''; //10
  //... and many other more just follow the pattern.
</script>