Câu hỏi Làm thế nào tôi có thể làm mới một trang với jQuery?


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


2049
2018-03-23 11:55


gốc


Kể từ jQuery là một khuôn khổ javascript cho dễ dàng thao tác DOM và sự kiện ràng buộc, tôi sẽ khuyên bạn nên yêu cầu javascript thay vì jQuery. - WoIIe
Bạn không cần jQuery cho việc này. - Stardust
Có liên quan hơn bao giờ hết: needsmorejquery.com - K_7


Các câu trả lời:


Sử dụng location.reload():

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

Các reload() hàm có tham số tùy chọn có thể được đặt thành true để buộc tải lại từ máy chủ thay vì bộ nhớ cache. Tham số mặc định là false, do đó, theo mặc định, trang có thể tải lại từ bộ nhớ cache của trình duyệt.


3321
2018-03-23 11:57



Điều này không hiệu quả với tôi. Điều này làm việc mặc dù: window.location.href = window.location.href; - Yster
Điều này không hiệu quả với tôi. window.location.href=window.location.href; và location.href=location.href; đã làm việc. - Travis
window.location.reload(true); sẽ làm mới khó, nếu không theo mặc định thì nó sai - Sagar Naliyapara
Điều này có hiệu quả nhưng có sự chậm trễ nhỏ - mindmyweb
@ Sagar N, điều này cũng làm việc cho tôi. Cảm ơn bạn. Tôi đã cố gắng vài ngày qua với cách tiếp cận khác nhau nhưng giải pháp của bạn đã cứu tôi. - Ludus H


Đ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();

410
2018-03-23 11:57





nhiều cách không giới hạn để làm mới 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 lần nữa (chẳng hạn như nội dung tài liệu    thay đổi động), chúng tôi sẽ chuyển đối số 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>


345
2018-06-23 09:47



1 cho danh sách và jsfiddle. Tôi có một câu hỏi, trong jsfiddle 1 và 6 làm cho trang được tạo ra biến mất trong một khoảnh khắc khi nó được tải lại, và 2-5 làm cho việc tải lại trang là "không đáng kể". Trong công cụ dev trong chrome tôi có thể thấy trang đang được tạo lại, nhưng bạn có thể giải thích quá trình vẽ lại được không? xin vui lòng. Cảm ơn bạn trước. - Cԃաԃ
@ Cԃ ա ԃ Tôi thấy không có sự khác biệt ... Có lẽ bộ nhớ cache là vấn đề? Tôi sẽ xem xét sớm thôi. - Ionică Bizău
1 và 6 (reload()/(false)) chậm hơn. hmmm hấp dẫn. :) và 1 và 6 giống như reload()Tham số mặc định của bạn là false. - Cԃաԃ
location.href = location.href là những gì tôi thường sử dụng, nhưng cảm ơn những người khác. Rất hữu dụng! +1 - Amal Murali
@ Cԃ ա ԃ Cuối cùng tôi có thể tái tạo những gì bạn thấy và tôi hỏi đây. - Ionică Bizău


Rất nhiều cách sẽ hoạt động, tôi giả sử:

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

183
2018-03-23 11:58



Điều này window.location.href=window.location.href; sẽ làm không có gì nếu URL của bạn có # / hashbang ở cuối example.com/something#blah: - AaronLS
Trong trường hợp ai đó tự hỏi sự khác biệt giữa location.reload() và history.go(0) là: không có gì cả. Phần có liên quan của thông số HTML 5 tại w3.org/TR/html5/browsers.html#dom-history-gorõ ràng ra lệnh rằng chúng tương đương: "Khi mà go(delta) phương thức được gọi, nếu đối số cho phương thức bị bỏ qua hoặc có giá trị bằng 0, tác nhân người dùng phải hành động như thể location.reload() phương pháp được gọi thay thế. " - Mark Amery
Người duy nhất làm việc cho tôi là cái này: window.location.href = window.location.href; - Yster


Để 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à "", nghĩa là trang này.


114
2017-09-30 11:00



Downvoting. Điều này không thực sự trả lời câu hỏi, nhưng thay vào đó cho thấy cách thay thế HTML của trang bằng một phản hồi Ajax. Điều đó khác với việc tải lại trang: ví dụ: tôi đang làm việc với một tình huống ngay bây giờ, nơi điều này sẽ không hoạt động để giải quyết vấn đề ban đầu. - Marnen Laibow-Koser
Một vấn đề với việc tải lại toàn bộ HTML như thế này là phải tự gọi các sự kiện onload / ready và giảm thiểu việc ghi đè các biến đã khai báo trước đó mà trạng thái bạn có thể muốn giữ lại sau khi làm mới. - PassKit
Trừ khi bạn rất cẩn thận với mã của mình sẽ dẫn đến rò rỉ bộ nhớ, nơi bạn đã đính kèm xử lý sự kiện và như vậy mà không cần tách chúng trước khi thay thế mã họ đang gắn vào. - Daniel Llewellyn
Tôi đang sử dụng này để tải lại bảng điều khiển của chúng tôi mỗi giây, không nhấp nháy! Đó là sao chổi của người đàn ông nghèo / json api. Nhờ @DanielLlewellyn et al. để cảnh báo. - William Entriken
Một vài người đã nhận xét rằng phương pháp này rất hữu ích để làm mới chỉ một phần của trang. Nó không phải là. Tôi nghĩ những người đó hiểu lầm context thông số của $.ajax và mong đợi nó bằng cách nào đó thực hiện một số loại ma thuật. Tất cả nó là đặt this giá trị của hàm gọi lại. Ajax đến URL của "" sẽ truy cập URL bạn đang truy cập, do đó, thường tải HTML hoàn chỉnh (bao gồm <html> và <head> và <body>), và không có gì trong câu trả lời này lọc ra những thứ bạn không muốn. - Mark Amery


Nếu trang hiện tại được tải bởi một 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 trang được tải bởi yêu cầu POST.


97
2018-06-22 11:58



Tuy nhiên, điều này sẽ mất chuỗi truy vấn, trong khi window.location = window.location sẽ không - mrmillsy
@mrmillsy window.location = window.location cũng không hoàn hảo, tuy nhiên; nó không có gì nếu có một hashbang (hashbang) trong URL hiện tại. - Mark Amery


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.


55
2018-03-23 12:01





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

location.reload(forceGet)

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

Giá trị mặc định là false sẽ tải lại trang từ bộ nhớ cache.

Đặ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ộ nhớ cache.

Hay là

location.reload()

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


48
2017-07-25 14:27



MDN cho điều này: developer.mozilla.org/en-US/docs/Web/API/Location/reload - Max Heiber


Ba phương pháp tiếp cận với các hành vi liên quan đến bộ nhớ cache khác nhau:

  • location.reload(true)

    Trong các trình duyệt triển khai forcedReload thông số của 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 trang (tập lệnh, bảng định kiểu, hình ảnh, v.v.). Sẽ không phục vụ bất kì tài nguyên từ bộ nhớ cache - nhận các bản sao mới từ máy chủ mà không gửi bất kỳ if-modified-since hoặc là if-none-match tiêu đề 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 nếu có thể.

    Lưu ý rằng đi qua true đến location.reload() được hỗ trợ trong Firefox (xem MDN) và Internet Explorer (xem MSDN) nhưng không được hỗ trợ trên toàn cầu và không phải là một phần của thông số W3 HTML 5, cũng không thông số HTML 5.1 dự thảo W3, cũng không 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) cư xử 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 và thực hiện RFC 7234 yêu cầu xác thực lại cho bất kỳ tài nguyên nào (như tập lệnh) mà trình duyệt đã lưu trong bộ nhớ cache, ngay cả khi họ tươi RFC 7234 cho phép trình duyệt phân phối chúng mà không cần xác nhận lại.

    Chính xác cách trình duyệt nên sử dụng bộ nhớ cache 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 cách thử nghiệm.

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

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

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

    Tải lại trang mà không cần tìm nạp lại hoặc xác thực lại bất kì  tươi tài nguyên từ bộ nhớ cache. Nếu bản thân HTML của trang là 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 cả.

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

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

    Một lần nữa, các hành vi bộ nhớ đệm ở đây là không xác định như xa 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ộ nhớ cache, miễn là trang không có hàm băm trong URL của nó, trong trường hợp này, nó 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ợ phổ biến và sẽ hoạt động không khác gì location.reload() trong một số trình duyệt, như Chrome)
  • location.reload() để tái tạo trung thực hiệu quả của người dùng khi nhấp vào nút 'làm mới'.

28
2017-11-14 11:22



+1 cho vị trí = vị trí; không có nhiều người dường như đề xuất nó mặc dù nó ngắn hơn hầu hết các câu trả lời được cung cấp, nhược điểm duy nhất là nó dễ đọc Tôi đoán trong khi location.reload () là một chút ngữ nghĩa hơn - Brandito
@Brandito Quan trọng hơn, location = location không hoạt động nếu có băm trong URL. Đối với bất kỳ trang web nào sử dụng các mảnh vụn - hoặc thậm chí cho bất kỳ trang web nào mà ai đó liên kết đến một trang có thể có thể thêm một mảnh nhỏ vào URL - điều đó làm cho trang web bị hỏng. - Mark Amery