Làm cách nào để tải tệp HTML trong div bằng jQuery?

Question

Tự động tải trang HTML trong thẻ div bằng jquery;

Nội dung chính Show

Cách tải trang Html bên ngoài vào Div bằng jQuery
Jquery Ajax$. phương pháp tải
Cú pháp của jQuery Ajax $. phương pháp tải
Các tham số của jQuery Ajax $. phương pháp tải
Ví dụ - Cách tải trang html bên ngoài vào div bằng jquery
jQuery và AJAX thật VUI
Làm cách nào để tải tệp HTML trong jQuery?
Làm cách nào để hiển thị nội dung HTML trong div?
Làm cách nào để hiển thị nội dung HTML trong div bằng JavaScript?
Làm cách nào để tải tệp HTML bên ngoài bằng JavaScript?

Cách tải trang Html bên ngoài vào Div bằng jQuery

Sử dụng jQuery ajax $. phương thức tải, bạn có thể tải trang html bên ngoài hoặc trang html vào div

Jquery Ajax$. phương pháp tải

ajax $. phương thức load() đang tìm nạp dữ liệu hoặc nội dung, một trang khác vào div, HTML bên ngoài vào div từ các trang hoặc máy chủ khác. ajax $. phương thức tải gửi yêu cầu không đồng bộ từ máy chủ, truy xuất dữ liệu từ máy chủ và thay thế nội dung mà không cần làm mới/tải lại toàn bộ trang web hoặc tải trang web bên ngoài vào div của trang html

Cú pháp của jQuery Ajax $. phương pháp tải

$.load( url [, data ] [, success ]);

Các tham số của jQuery Ajax $. phương pháp tải

url. Đây là thông số bắt buộc. Đây là chỉ định URL của tệp bạn muốn tải
dữ liệu. Điều này được sử dụng để gửi một số đến máy chủ với yêu cầu
thành công. Chức năng này sẽ được thực hiện khi yêu cầu thành công

Ví dụ - Cách tải trang html bên ngoài vào div bằng jquery

Ví dụ này sẽ minh họa cho bạn cách gửi yêu cầu tải HTTP đến máy chủ và lấy dữ liệu từ máy chủ

Chúng ta cần tạo một tên tệp html “load. html” và lưu trữ vào máy chủ web của bạn và thay thế mã bên dưới tại đây

Tham số dữ liệu tùy chọn chỉ định một tập hợp các cặp khóa/giá trị chuỗi truy vấn để gửi cùng với yêu cầu

Tham số gọi lại tùy chọn là tên của một hàm sẽ được thực thi sau khi hoàn thành phương thức load()

Đây là nội dung của tập tin ví dụ của chúng tôi. "demo_test. txt"

jQuery và AJAX thật VUI

Đây là một số văn bản trong một đoạn văn

Ví dụ sau tải nội dung của tệp "demo_test. txt" vào một địa chỉ cụ thể

yếu tố

Cũng có thể thêm bộ chọn jQuery vào tham số URL

Ví dụ sau tải nội dung của phần tử có id="p1", bên trong tệp "demo_test. txt", vào một địa chỉ cụ thể

yếu tố

Tham số gọi lại tùy chọn chỉ định chức năng gọi lại sẽ chạy khi phương thức load() hoàn thành. Hàm gọi lại có thể có các tham số khác nhau

responseTxt - chứa nội dung kết quả nếu cuộc gọi thành công
statusTxt - chứa trạng thái của cuộc gọi
xhr - chứa đối tượng XMLHttpRequest

Ví dụ sau hiển thị hộp cảnh báo sau khi phương thức load() hoàn tất. Nếu phương pháp load() đã thành công, nó sẽ hiển thị "Đã tải nội dung bên ngoài thành công. ", và nếu không thành công, nó sẽ hiển thị thông báo lỗi

Phương thức load() của jQuery cho phép tải nội dung văn bản hoặc HTML từ máy chủ và thêm vào phần tử DOM

cú pháp

$.load(url,[data],[callback]);

Thông số Mô tả

url. yêu cầu url mà bạn muốn truy xuất nội dung
dữ liệu. Dữ liệu JSON được gửi theo yêu cầu đến máy chủ
gọi lại. chức năng được thực thi khi yêu cầu thành công

Ví dụ sau đây cho thấy cách tải nội dung html từ máy chủ và thêm nó vào phần tử div

Ví dụ. Tải nội dung HTML

$('#msgDiv').load('/demo.html');
    
<div id="msgDiv">div>

Trong ví dụ trên, chúng tôi đã chỉ định tệp html sẽ tải từ máy chủ và thêm nội dung của nó vào phần tử div

Ghi chú. Nếu không có phần tử nào phù hợp với bộ chọn thì yêu cầu Ajax sẽ không được gửi.

Phương thức load() cho phép chúng ta chỉ định một phần của tài liệu phản hồi sẽ được chèn vào phần tử DOM. Điều này có thể đạt được bằng cách sử dụng tham số url, bằng cách chỉ định bộ chọn có url được phân tách bằng một hoặc nhiều ký tự khoảng trắng như minh họa trong ví dụ sau.

Ví dụ. Phương thức tải jQuery ()

$('#msgDiv').load('/demo.html #myHtmlContent');

<div id="msgDiv">div>

Trong ví dụ trên, nội dung của phần tử có id là myHtmlContent sẽ được thêm vào phần tử msgDiv. Sau đây là một bản demo. html

thử nghiệm. nội dung html

DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>title>
head>
<body>
    <h1>This is demo html page.h1>
    <div id="myHtmlContent">This is my html content.div>
body>
html>

Phương thức load() cũng cho phép chúng ta chỉ định dữ liệu sẽ được gửi đến máy chủ và tìm nạp dữ liệu

Ví dụ. Đặt dữ liệu trong tải()

$('#msgDiv').load('getData', // url 
                  { name: 'bill' },    // data 
                  function(data, status, jqXGR) {  // callback function 
                            alert('data loaded')
                    });

<div id="msgDiv">div>

Thử nó

Trong ví dụ trên, tham số đầu tiên là một url mà từ đó chúng tôi muốn tìm nạp tài nguyên. Tham số thứ hai là dữ liệu được gửi đến máy chủ. Tham số thứ ba là hàm gọi lại để thực thi khi yêu cầu thành công

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 để hiển thị nội dung HTML trong div?

Mã HTML có thể được thêm vào div bằng cách sử dụng phương thức insertAdjacentHTML() . Tuy nhiên, bạn cần chọn một phần tử bên trong div để thêm mã. Phương thức này nhận hai tham số. Vị trí (trong tài liệu) mà bạn muốn chèn mã ('afterbegin', 'beforebegin', 'afterend', 'beforeend')

Làm cách nào để hiển thị nội dung HTML trong div bằng JavaScript?

Hiển thị hoạt động trên bài đăng này. .

tải html từ một trang từ xa (nơi chúng tôi có quyền truy cập CORS)

phân tích cú pháp result-html cho một phần cụ thể của trang

chèn phần đó của trang vào div trên trang hiện tại

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ẻ

programming html

Làm cách nào để tải tệp HTML trong div bằng jQuery?

Cách tải trang Html bên ngoài vào Div bằng jQuery

Jquery Ajax$. phương pháp tải

Cú pháp của jQuery Ajax $. phương pháp tải

Các tham số của jQuery Ajax $. phương pháp tải

Ví dụ - Cách tải trang html bên ngoài vào div bằng jquery

jQuery và AJAX thật VUI

Làm cách nào để tải tệp HTML trong jQuery?

Làm cách nào để hiển thị nội dung HTML trong div?

Làm cách nào để hiển thị nội dung HTML trong div bằng JavaScript?

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

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội