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

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

• Thêm và xóa thuộc tính trong jQuery
• Cách phát âm thanh sau vài giây hoặc chậm trễ trong JavaScript

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

				
				Beam me up, Scotty 
				
			

Trong hướng dẫn này, chúng ta sẽ tìm hiểu về phương thức

				
				Beam me up, Scotty 
				
			

				
				Beam me up, Scotty 
				
			

				
				$[selector].load[url,data,callback]
				
			

Dưới đây là các thông số của yêu cầu

				
				Beam me up, Scotty 
				
			

Cần thiết. Một url chuỗi mà yêu cầu sẽ được gửi đến

				
				Beam me up, Scotty 
				
			

Khô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ủ

				
				Beam me up, Scotty 
				
			

Khô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à

				
				Beam me up, Scotty 
				
			

				
				Beam me up, Scotty 
				
			

				
				Beam me up, Scotty 
				
			

Chúng tôi sẽ tải HTML bên ngoài này vào

				
				Beam me up, Scotty 
				
			

				
				Beam me up, Scotty 
				
			

				
				Beam me up, Scotty 
				
			

$[document].ready[ function[] {
      $["#load"].load["test.html"];
}];

				
				Beam me up, Scotty 
				
			

$[document].ready[ function[] {
      $["#load"].load["test.html"];
}];

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"];
}];

$[document].ready[ function[] {
      $["#load"].load["test.html"];
}];

và đặt nó bên trong phần tử đã chọn [

$[document].ready[ function[] {
      $["#load"].load["test.html"];
}];

				
				Beam me up, Scotty 
				
			

				
				Beam me up, Scotty 
				
			

				
				Beam me up, Scotty 
				
			

				
				Beam me up, Scotty 
				
			

				
				Beam me up, Scotty 
				
			

				
				Beam me up, Scotty 
				
			

				
				Beam me up, Scotty 
				
			

				
				Beam me up, Scotty 
				
			

$[document].ready[ function[] {
      $["#load"].load["test.html"];
}];

$[document].ready[ function[] {
      $["#load"].load["test.html"];
}];

$[document].ready[ function[] {
      $["#load"].load["test.html"];
}];

$[document].ready[ function[] {
      $["#load"].load["test.html"];
}];

$[document].ready[ function[] {
      $["#load"].load["test.html"];
}];

$[document].ready[ function[] {
      $["#load"].load["test.html"];
}];

$[document].ready[ function[] {
      $["#load"].load["test.html"];
}];

$[document].ready[ function[] {
      $["#load"].load["test.html"];
}];

$[document].ready[ function[] {
      $["#load"].load["test.html"];
}];

				
				Beam me up, Scotty 
				
			

$[document].ready[ function[] {
      $["#load"].load["test.html"];
}];

$[document].ready[ function[] {
      $["#load"].load["test.html"];
}];

				
				Beam me up, Scotty 
				
			

$[document].ready[ function[] {
      $["#load"].load["test.html"];
}];

$[document].ready[ function[] {
      $["#load"].load["test.html"];
}];