Hướng dẫn này giúp tải lại và làm mới trang web bằng JavaScript và jQuery. Chúng tôi sẽ sử dụng các phương thức JavaScript để tải lại trang và làm mới trang. jQuery AJAX cũng được sử dụng để làm mới trang
Đôi khi, chúng tôi cần tải lại trang web hoặc làm mới trang theo cách thủ công hoặc tự động
Bạn có thể làm mới trang theo cách thủ công bằng bàn phím ctrl+R
, nhưng với lập trình, chúng tôi cần sử dụng bất kỳ chương trình phía máy khách nào Giống như JavaScript
Tôi sẽ giải thích ba cách JavaScript để tải lại trang. JQuery cũng được sử dụng để tải lại trang bằng phương thức JavaScript và AJAX
Chúng tôi sẽ đề cập đến các chủ đề sau trong hướng dẫn này
- Cách tải lại trang theo cách thủ công trong JavaScript
- Tự động làm mới trang bằng JavaScript
- Tự động làm mới trang bằng cách sử dụng
$[document].ready[function[] { // RELOAD PAGE ON BUTTON CLICK EVENT. $['#reload_page'].click[function [] { location.reload[true]; }]; }];
0 trong JavaScript - Tự động làm mới trang bằng cách sử dụng
$[document].ready[function[] { // RELOAD PAGE ON BUTTON CLICK EVENT. $['#reload_page'].click[function [] { location.reload[true]; }]; }];
1 - Làm mới bộ đếm thời gian trang bằng HTML Meta
- Làm mới trang bằng JavaScript
$[document].ready[function[] { // RELOAD PAGE ON BUTTON CLICK EVENT. $['#reload_page'].click[function [] { location.reload[true]; }]; }];
2 - Cách làm mới một phần trang bằng jQuery Ajax
- Cách làm mới toàn bộ trang bằng Ajax
Cách làm mới trang trong JavaScript
JavaScript là một ngôn ngữ kịch bản phía máy khách rất mạnh. Ở đây, tôi đang hiển thị một số cách để tải lại và làm mới trang
Cách tải lại trang theo cách thủ công trong JavaScript
Tôi đang sử dụng phần tử HTML của nút và đã đính kèm sự kiện nhấp chuột để kích hoạt chức năng tải lại trang bằng JavaScript. Người dùng cần nhấp vào nút theo cách thủ công
Refresh or Reload a Page Using jQuery
Chúng tôi sẽ viết phương thức jQuery để làm mới trang. Chúng tôi sẽ đính kèm sự kiện nhấp chuột vào nút
$[document].ready[function[] { // RELOAD PAGE ON BUTTON CLICK EVENT. $['#reload_page'].click[function [] { location.reload[true]; }]; }];3Quảng cáo
$[document].ready[function[] { // RELOAD PAGE ON BUTTON CLICK EVENT. $['#reload_page'].click[function [] { location.reload[true]; }]; }];
Chúng tôi đã sử dụng phương pháp
$[document].ready[function[] { // RELOAD PAGE ON BUTTON CLICK EVENT. $['#reload_page'].click[function [] { location.reload[true]; }]; }];4 để tải lại trang. Địa điểm. phương thức reload[] tải lại tài nguyên từ URL hiện tại. Tham số tùy chọn và kiểu Boolean của nó, Vì vậy, khi nó được đặt thành
$[document].ready[function[] { // RELOAD PAGE ON BUTTON CLICK EVENT. $['#reload_page'].click[function [] { location.reload[true]; }]; }];5, trang luôn được tải lại từ máy chủ. Khi
$[document].ready[function[] { // RELOAD PAGE ON BUTTON CLICK EVENT. $['#reload_page'].click[function [] { location.reload[true]; }]; }];6 hoặc không được chỉ định, Trang sẽ được tải lại từ bộ đệm của trình duyệt
Tự động làm mới trang bằng JavaScript
Chúng ta có thể tự động tải lại trang bằng bộ hẹn giờ, JavaScript có phương thức setInterval để thực thi một phương thức trong một khoảng thời gian nhất định
$[document].ready[function[] { // auto refresh page after 1 second setInterval['refreshPage[]', 1000]; }]; function refreshPage[] { location.reload[]; }
Chúng tôi đã sử dụng phương thức
$[document].ready[function[] { // RELOAD PAGE ON BUTTON CLICK EVENT. $['#reload_page'].click[function [] { location.reload[true]; }]; }];7 trong đoạn mã trên. Phương thức
$[document].ready[function[] { // RELOAD PAGE ON BUTTON CLICK EVENT. $['#reload_page'].click[function [] { location.reload[true]; }]; }];7 có hai tham số – tham số đầu tiên là tên phương thức, có mã để làm mới hoặc tải lại trang. Cái thứ hai là một khoảng thời gian, sẽ được sử dụng để gọi hàm nhiều lần
Tự động làm mới trang Sử dụng lịch sử. đi [] trong JavaScript
Đối tượng cửa sổ JavaScript có thuộc tính lịch sử có thể được sử dụng để làm mới trang. Đối tượng cửa sổ này trả về thuộc tính chỉ đọc của đối tượng Lịch sử. Cửa sổ. thuộc tính history trợ giúp để thao tác lịch sử phiên trình duyệt. Tôi đang sử dụng lịch sử. phương thức go[] để tải lại trang hiện đang hoạt động bỏ qua thông số
$[document].ready[function[] { // RELOAD PAGE ON BUTTON CLICK EVENT. $['#reload_page'].click[function [] { location.reload[true]; }]; }];9. Phương thức này nhận một tham số số nguyên được sử dụng để điều hướng đến trang sau và trang tiếp theo.
$[document].ready[function[] { // auto refresh and reload page history.go[0]; }];
Tự động làm mới trang bằng cửa sổ. vị trí. href
Cửa sổ. bất động sản vị trí có bất động sản
$[document].ready[function[] { // auto refresh page after 1 second setInterval['refreshPage[]', 1000]; }]; function refreshPage[] { location.reload[]; }0, Cửa sổ. vị trí. href trả về URL của trang hiện tại. Chúng ta cũng có thể sử dụng vị trí. href để tải lại và làm mới trang. Chúng tôi cũng có thể nhắm mục tiêu một trang khác để tải lại nếu bạn muốn trang hiện tại, sau đó đặt thuộc tính bản thân href
$[document].ready[function[] { window.location.href = window.location.href; }];
Làm mới bộ đếm thời gian trang bằng HTML Meta
Trang HTML có thẻ meta để làm mới trang, Bạn có thể đặt thời gian ở trang thứ hai và trang đích sẽ tải lại trong khoảng thời gian nhất định. Bạn có thể bỏ qua thông số URL nếu bạn tải lại cùng một trang
Đoạn mã trên sẽ tải lại toàn bộ trang [
$[document].ready[function[] { // auto refresh page after 1 second setInterval['refreshPage[]', 1000]; }]; function refreshPage[] { location.reload[]; }1] cứ sau 5 giây
Làm mới thời gian trang bằng JavaScript
Bạn cũng có thể làm mới trang tại khoảng thời gian nhất định bằng JavaScript
setTimeout[function[]{ window.location.reload[1]; }, 5000];
Đoạn mã trên sẽ tải lại toàn bộ trang [
$[document].ready[function[] { // auto refresh page after 1 second setInterval['refreshPage[]', 1000]; }]; function refreshPage[] { location.reload[]; }1] cứ sau 5 giây
Cách làm mới trang bằng AJAX
Hãy thảo luận về một số cách để tải lại trang bằng jquery ajax. AJAX giúp tải lại toàn bộ trang và một phần nội dung trang
Cách đầu tiên để tải lại toàn bộ trang có nghĩa là bạn phải làm mới toàn bộ trang. Cách thứ hai để làm mới là sử dụng tải một phần và nó chỉ tải những vùng đã được thay đổi
jQuery có chức năng AJAX để tải lại hoặc làm mới trang. AJAX giúp làm mới toàn bộ trang hoặc một khu vực cụ thể trên trang. Chúng tôi có thể làm mới nội dung div, bảng hoặc nút, v.v.
quảng cáoNội dung của trang có thể được tải lại bằng cách sử dụng các phương thức jQuery Ajax khác nhau. Các phương thức này là load[], get[] và post[], v.v.
Cách làm mới DIV bằng jQuery AJAX
Bạn có thể cần làm mới một trang web sau khi thực hiện một số thay đổi đối với trang đó. Các thay đổi có thể là, thêm plugin/tiện ích mở rộng mới, thay đổi mã, v.v.
$.ajax[{ type: 'POST', url: post_url, data: post_data, success: function[res] { $['#event'].html[res].delay[2000]; } }];
Trong đoạn mã trên, chúng tôi đang làm mới nội dung div của
$[document].ready[function[] { // auto refresh page after 1 second setInterval['refreshPage[]', 1000]; }]; function refreshPage[] { location.reload[]; }3 bằng cách sử dụng ajax. Chúng tôi có thể sử dụng cùng một mã để liên tục làm mới nội dung
$[document].ready[function[] { // auto refresh page after 1 second setInterval['refreshPage[]', 1000]; }]; function refreshPage[] { location.reload[]; }3 bằng phương thức setInterval
Trang làm mới AJAX bằng jQuery
Bạn cũng có thể làm mới toàn bộ trang bằng jQuery nhưng nó sẽ hiển thị trang đang tải cho người dùng cuối, Bạn có thể tải lại toàn bộ bằng cách sử dụng các khái niệm bố cục Giống như bạn có thể tạo ba phần đầu trang, chân trang, nội dung. Bạn có thể tải lại nội dung div bằng cách sử dụng AJAX sẽ trông giống như trang làm mới
$[document].ready[function[] { // auto refresh page after 1 second setInterval['refreshPage[]', 1000]; }]; function refreshPage[] { location.reload[]; }5