Tự động tải trang HTML trong thẻ div bằng jquery;
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ôngstatusTxt
- chứa trạng thái của cuộc gọixhr
- 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'];
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'];
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>
This is demo html page.
This is my html content.
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']
}];
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