JavaScript tự động làm mới
|
Trong phần này, chúng ta sẽ tìm hiểu tải lại và làm mới trang tự động. Chúng tôi sẽ sử dụng jQuery để làm điều này. Chúng tôi có thể tải lại hoặc làm mới trang được nhúng hoặc trang đang hoạt động theo cách thủ công hoặc tự động với sự trợ giúp của jQuery. Nếu chúng tôi đang phát triển một trang web và chúng tôi muốn thêm tự động làm mới sau một khoảng thời gian, chúng tôi có thể làm điều đó bằng cách sử dụng JavaScript. Chúng tôi có thể sử dụng setTimeout(), thẻ meta http-equiv và setInterval() để tự động tải lại trang. Có nhiều công nghệ khác nhau như Codeigniter,. Net, PHP, Laravel, Java để tự động tải lại hoặc làm mới trang web Show
Đôi khi, khi chúng ta làm việc trên một trang, chúng ta cần tải lại trang sau một khoảng thời gian và khoảng thời gian đó có thể là 10 giây, 15 giây, 20 giây, 30 giây, v.v. Trong ví dụ dưới đây, chúng tôi sẽ mô tả các quy trình khác nhau để làm mới trang HTML. Phần này sẽ cung cấp 3 ví dụ để tự động tải lại trang PHP bằng một số phương pháp và làm mới trang PHP bằng JavaScript. Nếu chúng tôi muốn làm mới trang theo cách thủ công, chúng tôi cũng có thể làm điều đó bằng cách chỉ định một số khoảng thời gian ví dụ 1 Trong ví dụ đầu tiên, chúng ta sẽ sử dụng phương thức setTimeout() để tự động tải lại và làm mới một trang. Phương thức setTimeout() nhận hai tham số. Trong tham số đầu tiên, chúng tôi sẽ mô tả một chức năng, được sử dụng để chứa mã tải lại và làm mới trang. Trong đối số thứ hai, chúng tôi sẽ mô tả khoảng thời gian sau đó việc thực thi chức năng diễn ra. Khoảng thời gian phải tính bằng mili giây. Phương pháp này sẽ thực thi chức năng một lần duy nhất ví dụ 2 Trong ví dụ thứ hai, chúng ta sẽ sử dụng phương thức setInterval() để tự động tải lại và làm mới một trang. Phương thức setInterval() nhận hai tham số. Trong tham số đầu tiên, chúng tôi sẽ mô tả một chức năng, được sử dụng để chứa mã tải lại và làm mới trang. Trong đối số thứ hai, chúng ta sẽ mô tả khoảng thời gian, được sử dụng để gọi hàm nhiều lần. Khoảng thời gian phải tính bằng mili giây. Phương thức này lặp đi lặp lại việc thực thi chức năng sau khoảng thời gian nhất định cho đến khi ClearInterval() được gọi hoặc cửa sổ được đóng lại. Ở đây, chúng tôi không sử dụng bất kỳ phương thức nào để dừng thực thi hàm, được chỉ định trong phương thức setInterval(). Điều đó có nghĩa là phương thức thực thi chức năng cho đến khi chúng ta đóng cửa sổ ví dụ 3 Trong ví dụ thứ ba, chúng tôi sẽ sử dụng Meta để tự động tải lại và làm mới trang. Sử dụng thẻ Meta, chúng ta có thể đặt thời gian tính bằng giây. Sau đó, chúng tôi sẽ nhắm mục tiêu trang mà chúng tôi muốn tải lại trong khoảng thời gian đã chỉ định. Nếu chúng ta muốn chuyển một trang sang một trang khác, chúng ta có thể sử dụng URL để thực hiện việc này. Nếu chúng tôi không chỉ định URL, chúng tôi sẽ được tải lại trên cùng một trang Bây giờ ví dụ trên của chúng tôi đã sẵn sàng để chạy. Khi chúng tôi chạy bất kỳ ví dụ nào trong số này, đầu ra sau sẽ được tạo 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 4, 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ư JavaScriptTô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 làm mới trang trong JavaScriptJavaScript 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 JavaScriptTô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
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 vào nút 3Quảng cáoChúng tôi đã sử dụng phương pháp 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 5, trang luôn được tải lại từ máy chủ. Khi 6 hoặc không được chỉ định, Trang sẽ được tải lại từ bộ đệm của trình duyệtTự động làm mới trang bằng JavaScriptChú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 Chúng tôi đã sử dụng phương thức 7 trong đoạn mã trên. Phương thức 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ầnTự độ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 tham số 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.3Tự động làm mới trang bằng cửa sổ. địa điểm. hrefCửa sổ. bất động sản vị trí có bất động sản 0, Cửa sổ. địa điểm. 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 href5 Làm mới bộ đếm thời gian trang bằng HTML MetaTrang 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 6Đoạn mã trên sẽ tải lại toàn bộ trang ( 1) cứ sau 5 giâyLàm mới thời gian trang bằng JavaScriptBạn cũng có thể làm mới trang tại khoảng thời gian nhất định bằng JavaScript 8Đoạn mã trên sẽ tải lại toàn bộ trang ( 1) cứ sau 5 giâyCách làm mới trang bằng AJAXHã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 AJAXBạ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. 0Trong đoạn mã trên, chúng tôi đang làm mới nội dung div của 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 3 bằng phương thức setIntervalTrang làm mới AJAX bằng jQueryBạ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 div nội dung bằng AJAX sẽ trông giống như trang làm mới 5Làm cách nào để tự động làm mới trong JavaScript?Bạn có thể sử dụng vị trí. reload() Phương thức JavaScript để tải lại URL hiện tại . Phương pháp này hoạt động tương tự như nút Làm mới của trình duyệt. Phương thức reload() là phương thức chính chịu trách nhiệm tải lại trang.
Làm cách nào để tự động làm mới div bằng JavaScript?Để tự động làm mới phần tử DIV vài giây một lần, tôi sẽ gọi một phương thức (sẽ làm mới nội dung của DIV) từ bên trong cửa sổ. hàm setInterval(), tại một khoảng thời gian xác định (vài giây) . Bạn có thể tìm hiểu thêm về JavaScript. hàm setInterval() tại đây.
Làm cách nào để tải lại JavaScript mà không cần tải lại trang?lịch sử. pushState(nextState, nextTitle, nextURL); // Thao tác này sẽ thay thế mục hiện tại trong lịch sử của trình duyệt mà không cần tải lại cửa sổ. Môn lịch sử.
Làm cách nào để tải lại cùng một trang trong JavaScript?Vị trí cửa sổ. tải lại()
. Phương thức reload() hoạt động tương tự như nút tải lại trong trình duyệt của bạn. |
