Nếu quen thuộc với PHP, bạn có thể nhanh chóng nhúng một tệp PHP hoặc HTML khác vào trang của mình bằng cách sử dụng các câu lệnh bao gồm và yêu cầu
Điều này giúp tiết kiệm thời gian khi bạn cần thêm cùng một dòng mã vào một số tệp
Nếu bạn không sử dụng tập lệnh phía máy chủ trên trang web của mình thì bạn có thể sử dụng iframe hoặc ngôn ngữ tập lệnh phía máy khách
Có hai cách trong jQuery để bao gồm một tệp trong một tệp HTML khác –
- yêu cầu AJAX
- phương thức tải []
Home
CSS
/* Menu */
.menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: darkturquoise;
}
.menu li {
float: left;
}
.menu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.menu li a:hover {
background-color: lightskyblue;
}2. AJAX – NHẬN yêu cầu
Gửi các yêu cầu GET từ AJAX lấy dữ liệu từ máy chủ và sử dụng phản hồi của nó theo phương thức html[] để thêm nó vào trang
Mã hoàn thành
How to include HTML page with jQuery
$.get['header.html',function[response]{
$['#header'].html[response];
}];
Content
3. phương thức tải []
Có một cách khác để làm điều này với. hàm tải []. Thao tác này cũng tải nội dung từ máy chủ và thêm nội dung đó vào bộ chọn
Cú pháp –
$[ selector ].load[ URL ];
Bạn có thể chuyển URL của mình trong phương thức load[]
Mã hoàn thành
How to include HTML page with jQuery
$[document].ready[function[]{
$[ "#header" ].load[ "header.html" ];
}];
Content
4. Bản trình diễn
Cả hai đều cho cùng một đầu ra -
Xem bản trình diễn
5. Kết luận
Cả hai cách đều trả về nội dung từ máy chủ nhưng tôi không khuyên bạn nên sử dụng tập lệnh phía Máy chủ trong dự án của mình như – PHP, nơi bạn sử dụng các câu lệnh dựng sẵn e. g. -, bao gồm, yêu cầu, bao gồm_một lần và yêu cầu_một lần
Phương thức html[] của jQuery dùng để thay đổi toàn bộ nội dung của phần tử được chọn. Nó thay thế nội dung phần tử đã chọn bằng nội dung mới
Ghi chú. Đây là một chức năng rất hữu ích nhưng hoạt động trong một khu vực hạn chế do tài liệu API của nó. Tài liệu API của hàm jQuery html bao gồm ba chữ ký phương thức
Chữ ký phương thức đầu tiên không có đối số, vì vậy nó chỉ trả về HTML trong phần tử đó. Hai chữ ký còn lại có một đối số duy nhất. tôi. e. một chuỗi hoặc một hàm trả về một chuỗi
cú pháp
Nó được sử dụng để trả lại nội dung
Nó được sử dụng để thiết lập nội dung
Nó được sử dụng để thiết lập nội dung bằng cách gọi chức năng
Phương thức jQuery html[] được sử dụng để đặt nội dung hoặc trả về nội dung của các phần tử được chọn
- Để thiết lập nội dung. Khi bạn sử dụng phương thức này để đặt nội dung, nó sẽ ghi đè lên nội dung của tất cả các phần tử đã khớp
- Để trả lại nội dung. Khi bạn sử dụng phương thức này để trả về nội dung, nó sẽ trả về nội dung của phần tử được so khớp đầu tiên
Phương thức text[] được sử dụng để đặt hoặc chỉ trả về nội dung văn bản của các thành phần được chọn
Các tham số của phương thức jQuery html[]
Tham sốMô tảNội dungĐó là một tham số cần thiết. Nó được sử dụng để chỉ định nội dung mới cho các phần tử được chọn. Nó cũng có thể chứa các thẻ HTML. Chức năng [chỉ mục, nội dung hiện tại]Đó là một tham số tùy chọn. Nó chỉ định một hàm trả về nội dung mới cho các phần tử đã chọn- Mục lục. Nó hiển thị vị trí chỉ mục của phần tử trong tập hợp
- nội dung hiện tại. Nó hiển thị nội dung HTML hiện tại của phần tử được chọn
Ví dụ về phương thức jQuery html[]
Hãy lấy một ví dụ để chứng minh phương thức jQuery html[]. Nó đang thay đổi nội dung của tất cả các phần tử p
Kiểm tra nó ngay bây giờđầu ra
Nhấn vào đây để thay đổi nội dung của tất cả các phần tử pĐây là một đoạn
Đây là một đoạn khác
jQuery html[] ví dụ 2
Hãy xem một ví dụ khác về phương thức jQuery html[] trả về nội dung HTML. Nó chỉ trả về nội dung của đoạn đầu tiên