Làm cách nào để tải HTML bên ngoài vào div bằng JavaScript?

Đôi khi chúng ta cần cập nhật một phần nào đó của trang mà không cần phải làm mới nó, một chức năng tôi thường sử dụng là jQuery load()

chức năng lỗi thời

Chức năng này đã lỗi thời kể từ phiên bản jQuery 1. 8, nếu bạn cần tải nội dung bên ngoài và gửi tham số, bạn có thể sử dụng các hàm jQuery get() và post()

Cú pháp tải jQuery()

Với load() chúng ta có thể nạp vào một div nào đó một tập tin bên ngoài (php, html, asp…) ngay lúc chúng ta cần hoặc theo yêu cầu của người dùng bằng các biểu mẫu, nút bấm, liên kết…

Tệp bên ngoài này cho tập lệnh phải được lưu trữ trong cùng một miền của web

Hãy xem cú pháp được trích xuất từ ​​​​trang web chính thức

1

.tải( url [, data] [, callback(responseText, textStatus, XMLHttpRequest)] )

1. url (bắt buộc). Là chuỗi chứa url được tải
2. dữ liệu. Các tham số mà chúng ta có thể chuyển để được xử lý bởi đích của url
3. gọi lại. Hàm được gọi sau khi xử lý url

Phương pháp này là một cách đơn giản để lấy dữ liệu từ máy chủ từ cùng một HTML, nó khá giống với $. get(url, data, success), load() là một phương thức và get() là một hàm toàn cục

Trong các bản trình diễn mà tôi đưa ra bên dưới, chúng ta sẽ buộc tải bên ngoài này thông qua hàm Click() của jQuery, hàm này sẽ được thực thi khi nhấn nút

Ví dụ 1 về jQuery load() cung cấp url làm tham số

Hãy xem ví dụ 1 demo

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<đầu>

<. -- Thư viện jQuery -->

type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

<. -- Thao tác trên nút với id=button và cập nhật div với id=layer -->