Tải một trang html trong div bằng cách sử dụng jquery

Question

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

Nội dung chính Show

jQuery và AJAX thật VUI
Ghi chú bổ sung
Làm cách nào để mở một trang HTML khác bằng jQuery?
Làm cách nào để tải một trang HTML khác bằng JavaScript?
Làm cách nào để tải trang HTML bằng AJAX?
Làm cách nào để đọc tệp HTML trong jQuery?

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

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>

7

Đâ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ể

thành phần

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ể

thành phần

Tham số gọi lại tùy chọn chỉ định chức năng gọi lại sẽ chạy khi hoàn thành phương thức

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>

7. Hàm gọi lại có thể có các tham số khác nhau

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>

9 - chứa nội dung kết quả nếu cuộc gọi thành công

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

<div id="msgDiv">div>

0 - chứa trạng thái của cuộc gọi

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

<div id="msgDiv">div>

1 - 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

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>

7 đã 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

Ghi chú. Trước jQuery 3. 0, bộ xử lý sự kiện cũng có một phương thức tên là


$( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );
});

1. Các phiên bản cũ hơn của jQuery đã xác định phương thức nào sẽ kích hoạt dựa trên tập hợp các đối số được truyền cho nó

Phương pháp này là cách đơn giản nhất để lấy dữ liệu từ máy chủ. Nó gần tương đương với


$( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );
});

2 ngoại trừ việc nó là một phương thức chứ không phải là hàm toàn cục và nó có hàm gọi lại ẩn. Khi một phản hồi thành công được phát hiện (i. e. khi


$( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );
});

3 là "thành công" hoặc "không sửa đổi"), thì


$( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );
});

4 đặt nội dung HTML của các phần tử phù hợp thành dữ liệu được trả về. Điều này có nghĩa là hầu hết các cách sử dụng phương pháp này có thể khá đơn giản.

1


$( "#result" ).load( "ajax/test.html" );

Nếu không có phần tử nào khớp với bộ chọn — trong trường hợp này, nếu tài liệu không chứa phần tử có id="result" — yêu cầu Ajax sẽ không được gửi

Chức năng gọi lại

Nếu một cuộc gọi lại "hoàn thành" được cung cấp, nó sẽ được thực thi sau khi thực hiện xử lý hậu kỳ và chèn HTML. Cuộc gọi lại được kích hoạt một lần cho từng phần tử trong bộ sưu tập jQuery và


$( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );
});

5 lần lượt được đặt cho từng phần tử DOM

1

2

3


$( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );
});

Trong hai ví dụ trên, nếu tài liệu hiện tại không chứa phần tử có ID là "kết quả" thì phương thức


$( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );
});

4 không được thực thi

Phương thức yêu cầu

Phương thức POST được sử dụng nếu dữ liệu được cung cấp dưới dạng một đối tượng;

Đang tải các đoạn trang

Phương pháp


$( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );
});

4, không giống như


$( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );
});

8, cho phép chúng tôi chỉ định một phần của tài liệu từ xa sẽ được chèn vào. Điều này đạt được với một cú pháp đặc biệt cho tham số


$( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );



});

9. Nếu một hoặc nhiều ký tự khoảng trắng được bao gồm trong chuỗi, thì phần của chuỗi sau khoảng trắng đầu tiên được coi là bộ chọn jQuery xác định nội dung sẽ được tải

Chúng tôi có thể sửa đổi ví dụ trên để chỉ sử dụng một phần của tài liệu được tìm nạp

1

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

6

Khi phương thức này thực thi, nó truy xuất nội dung của

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

60, nhưng sau đó jQuery phân tích cú pháp tài liệu được trả về để tìm phần tử có ID là

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

61. Phần tử này, cùng với nội dung của nó, được chèn vào phần tử có ID là

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

62 và phần còn lại của tài liệu đã truy xuất sẽ bị loại bỏ

jQuery sử dụng thuộc tính

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

63 của trình duyệt để phân tích cú pháp tài liệu đã truy xuất và chèn nó vào tài liệu hiện tại. Trong quá trình này, các trình duyệt thường lọc các phần tử từ tài liệu, chẳng hạn như các phần tử

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

64,

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

65 hoặc

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

66. Do đó, các phần tử được truy xuất bởi


$( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );
});

4 có thể không hoàn toàn giống như khi tài liệu được trình duyệt truy xuất trực tiếp

Thực thi tập lệnh

Khi gọi


$( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );
});

4 bằng URL không có biểu thức bộ chọn có hậu tố, nội dung được chuyển đến

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

69 trước khi tập lệnh bị xóa. Thao tác này thực thi các khối tập lệnh trước khi chúng bị loại bỏ. Tuy nhiên, nếu


$( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );
});

4 được gọi với biểu thức bộ chọn được thêm vào URL, thì các tập lệnh sẽ bị loại bỏ trước khi DOM được cập nhật và do đó không được thực thi. Một ví dụ về cả hai trường hợp có thể được nhìn thấy dưới đây

Tại đây, mọi JavaScript được tải vào

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

<div id="msgDiv">div>

81 như một phần của tài liệu sẽ thực thi thành công

1

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

<div id="msgDiv">div>

8

Tuy nhiên, trong trường hợp sau, các khối tập lệnh trong tài liệu được tải vào

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

<div id="msgDiv">div>

82 bị loại bỏ và không được thực thi

1

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>

1

Ghi chú bổ sung

Do các hạn chế về bảo mật của trình duyệt, hầu hết các yêu cầu "Ajax" đều phải tuân theo cùng một chính sách gốc;

ví dụ

Tải các mục danh sách của trang khác vào danh sách có thứ tự

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

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>

2

Thử nghiệm

Hiển thị thông báo nếu yêu cầu Ajax gặp lỗi

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

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>

3

Thử nghiệm

Tải nguồn cấp dữ liệu. html vào div với ID của nguồn cấp dữ liệu

1

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>

4

Kết quả

1

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>

5

truyền mảng dữ liệu đến máy chủ

1

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>

6

Tương tự như trên, nhưng sẽ POST các tham số bổ sung cho máy chủ và gọi lại được thực thi khi máy chủ phản hồi xong

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 một trang HTML khác bằng JavaScript?

Cách tiếp cận. Chúng ta có thể sử dụng cửa sổ. thuộc tính vị trí bên trong thẻ tập lệnh để tải mạnh một trang khác trong Javascript . Nó là một tham chiếu đến một đối tượng Vị trí, nó đại diện cho vị trí hiện tại của tài liệu. Chúng tôi có thể thay đổi URL của một cửa sổ bằng cách truy cập nó.

Làm cách nào để tải trang HTML bằng AJAX?

$(bộ chọn). load(URL,data,callback); Tham số URL bắt buộc chỉ định URL bạn muốn tải. 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 phương thức load() hoàn thành.

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

Trình duyệt không có quyền truy cập vào hệ thống tệp của máy chủ; . Mặc dù điều này có nghĩa là một yêu cầu HTTP bổ sung, nhưng việc đọc tệp HTML bằng jQuery thực sự dễ dàng. Chỉ cần sử dụng $. get() , sẽ đọc HTML thông qua AJAX và cho phép bạn lưu trữ nó trong một chuỗi .

programming html

Tải một trang html trong div bằng cách sử dụng jquery

jQuery và AJAX thật VUI

Chức năng gọi lại

Phương thức yêu cầu

Đang tải các đoạn trang

Thực thi tập lệnh

Ghi chú bổ sung

ví dụ

Thử nghiệm

Thử nghiệm

Kết quả

Làm cách nào để mở một trang HTML khác bằng jQuery?

Làm cách nào để tải một trang HTML khác bằng JavaScript?

Làm cách nào để tải trang HTML bằng AJAX?

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

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