JQuery tải HTML vào div
Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách tải tệp HTML trong phần tử div bằng jQuery. Chà, rất dễ thực hiện điều đó bằng cách sử dụng thẻ iframe HTML. Tuy nhiên, lần này chúng ta sẽ làm điều đó với mã JavaScript sử dụng jQuery Show Lúc đầu, hãy viết mã HTML của chúng tôi Rất đơn giản và dễ dàng. Phải không? . Bên trong phần tử div của chúng tôi với ID "tải", chúng tôi sẽ tải nội dung HTML của mình Bây giờ chúng ta sẽ viết mã jQuery của chúng ta. Trước khi chúng ta viết mã jQuery, hãy đảm bảo rằng bạn đã tải tệp jQuery Dưới đây là mã jQuery của chúng tôi để tải nội dung tệp HTML trong phần tử div của chúng tôi $(document).ready( function() { $("#load").load("test.html"); }); Trong đoạn mã trên, chúng ta đã sử dụng phương thức load() của jQuery. Với phương thức jQuery này, chúng tôi tải nội dung tệp HTML của mình. Chúng tôi đã chuyển ID "tải" cho phương thức này để tải HTML trong phần tử cụ thể Ngoài ra, đọc
Trước khi chúng tôi chạy nó trên máy chủ của chúng tôi và mở nó trên trình duyệt, hãy đảm bảo rằng bạn đã tạo “thử nghiệm. tập tin html”. Vì vậy, trước tiên, hãy tạo tệp HTML và đặt đường dẫn thích hợp của nó. Thêm một số nội dung vào tệp HTML của bạn để bạn có thể hiểu khi tệp được tải Phương thức jQuery 0 cho phép chúng ta tải dữ liệu từ máy chủ và đặt dữ liệu trả về (thường là HTML/văn bản) vào phần tử đã chọnTrong hướng dẫn này, chúng ta sẽ tìm hiểu về phương thức 0 này và tải một trang HTML vào 2 bằng cách sử dụng jQuery. Cú pháp sử dụng phương thức này như sau Dưới đây là các thông số của yêu cầu 3Cần thiết. Một url chuỗi mà yêu cầu sẽ được gửi đến 4Không bắt buộc. Dữ liệu ở định dạng chuỗi/đối tượng sẽ được gửi cùng với yêu cầu đến máy chủ 5Không bắt buộc. Hàm sẽ được thực thi khi hoàn thành yêu cầu Hãy xem xét một tệp HTML có tên là 6 bao gồm phần tử 7 bên dưới Chúng tôi sẽ tải HTML bên ngoài này vào 2. Sử dụng phương thức 0, chúng ta sẽ đặt nội dung của 6 vào phần tử $(document).ready( function() { $("#load").load("test.html"); });51 trống của trang bên dưới (được đánh dấu, dòng số 11). Với mục đích của ví dụ này, hãy đặt 6 vào cùng thư mục chứa tệp HTML bên dưới$(document).ready( function() { $("#load").load("test.html"); });5 Trang, khi được hiển thị trong trình duyệt, trông giống như Đây là cách với jQuery, chúng tôi tải nội dung từ một trang khác vào phần tử div của trang hiện tại Chúng tôi cũng có thể tải nội dung của tệp văn bản (không chứa thẻ HTML), chẳng hạn như, $(document).ready( function() { $("#load").load("test.html"); });53, $(document).ready( function() { $("#load").load("test.html"); });9 và đặt nó bên trong phần tử đã chọn ( $(document).ready( function() { $("#load").load("test.html"); });51), với một thay đổi rất nhỏ trong tập lệnh 1Đang tải các phần của trang HTMLBây giờ chúng ta hãy nối thêm một phần tử 7 khác, với một id, bên trong 6 4Thay vì tải và đặt toàn bộ nội dung của 6 vào thành phần đã chọn, chúng ta cũng có thể chọn và chỉ tải một phần của nó bằng cách chuyển bộ chọn jQuery cùng với url, được phân tách bằng ký tự khoảng trắng, như minh họa ở đây bằng cách chỉ chọn 7 8Khi tải, trang kết quả trông giống như Chức năng gọi lạiỞ đây, chúng ta đi sâu một chút vào tham số thứ ba của phương thức 0, hàm gọi lại. Hàm gọi lại có ba tham số theo thứ tự sau$(document).ready( function() { $("#load").load("test.html"); });91 chứa dữ liệu kết quả từ máy chủ theo yêu cầu thành công $(document).ready( function() { $("#load").load("test.html"); });92 chứa trạng thái của yêu cầu, như $(document).ready( function() { $("#load").load("test.html"); });93, $(document).ready( function() { $("#load").load("test.html"); });94, $(document).ready( function() { $("#load").load("test.html"); });95, $(document).ready( function() { $("#load").load("test.html"); });96, $(document).ready( function() { $("#load").load("test.html"); });97 $(document).ready( function() { $("#load").load("test.html"); });98 chứa đối tượng $(document).ready( function() { $("#load").load("test.html"); });99 Chúng tôi minh họa việc sử dụng nó với ví dụ dưới đây 9Nếu $(document).ready( function() { $("#load").load("test.html"); });92 trả về $(document).ready( function() { $("#load").load("test.html"); });93, nó sẽ in thông báo sau vào bảng điều khiển 2Nếu URL sai hoặc không tồn tại, $(document).ready( function() { $("#load").load("test.html"); });92 sẽ trả về $(document).ready( function() { $("#load").load("test.html"); });95 và sẽ ghi thông báo sau vào bảng điều khiển Làm cách nào để tải tệp HTML trong jQuery?Cách tiếp cận. . Đầu tiên, chúng tôi sẽ tạo tệp HTML bên ngoài của mình Thêm phần tử div vào tệp HTML nơi chúng tôi muốn tải HTML bên ngoài Theo kịch bản, sử dụng hàm ready() để kiểm tra xem DOM đã sẵn sàng chưa Sau đó chọn phần tử div mà chúng tôi muốn tải HTML bằng load() Làm cách nào để mở một trang HTML khác bằng jQuery?Làm cách nào để mở một trang HTML mới bằng jQuery? . $(cái này). tải ("tệp2. html"); $("div1"). tải ("tệp2. html"); //div1 là id cho div bên ngoài của file1 WL. Ứng dụng. openUrl("file2. html"); cửa sổ. openURL("file2. html"); Làm cách nào để tải tệp HTML bên ngoài bằng JavaScript?Để bao gồm một tệp JavaScript bên ngoài, chúng ta có thể sử dụng thẻ script với thuộc tính src . Bạn đã sử dụng thuộc tính src khi sử dụng hình ảnh. Giá trị cho thuộc tính src phải là đường dẫn đến tệp JavaScript của bạn. Thẻ tập lệnh này phải được bao gồm giữa các thẻ
Làm cách nào để lấy HTML của div trên một trang khác bằng jQuery AJAX?ajax({ url. href, loại. 'NHẬN', thành công. hàm(dữ liệu){ $('#content'). html($(dữ liệu). tìm('#nội dung'). html()); |