Bốn cách để gửi [chuyển] giá trị [dữ liệu] từ trang này sang trang khác bằng jQuery là
1. Tham số chuỗi truy vấn
2. Bánh quy
3. Cửa sổ bật lên
4. mẫu bài
Đánh dấu HTML
Trang nguồn [Mặc định. htm]
Đánh dấu HTML bao gồm Hộp văn bản HTML và Lựa chọn HTML [DropDownList]. Các giá trị của TextBox và DropDownList sẽ được gửi đến một trang khác theo bốn cách khác nhau bằng cách sử dụng jQuery
="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
Ảnh chụp màn hình
1. Chuỗi truy vấn
Ưu điểm. Không có gì như vậy.
Nhược điểm. Dữ liệu hiển thị trong URL.
Trang nguồn
Trang nguồn bao gồm một Nút HTML được gán với trình xử lý sự kiện Nhấp chuột jQuery
Khi Nút được bấm, các giá trị của Hộp văn bản Tên và Danh sách DropDownList Công nghệ được đặt làm Tham số Chuỗi truy vấn và sau đó trang được chuyển hướng đến trang Đích [Trang 2. htm]
Trang đích
Bên trong trình xử lý sự kiện sẵn sàng cho tài liệu jQuery, Chuỗi truy vấn được trích xuất bằng cách tách URL của trang hiện tại bằng cách sử dụng ký tự Dấu chấm hỏi [?].
Sau đó, một vòng lặp được thực thi và mỗi giá trị tham số QueryString được trích xuất bằng cách phân tách thêm bằng cách sử dụng ký tự dấu và [&] và các giá trị được trích xuất được giải mã bằng cách sử dụng hàm JavaScript decodeURIComponent được chèn dưới dạng các cặp Khóa và Giá trị vào một Mảng
Cuối cùng, các giá trị tham số Chuỗi truy vấn được tìm nạp từ Mảng bằng cách sử dụng tên của tham số Chuỗi truy vấn i. e. Khóa và được hiển thị trong HTML SPAN
var queryString = new Array[]; 1] {
var params = window. địa điểm. Tìm kiếm. tách[ '?' ][1]. tách[ '&' ];
for [ var i = 0; i < . chiều dài;
var key = params[i]. tách[ '=' ][0];
var value = decodeURIComponent[params[i]. tách[ '=' ][1]];
queryString[key] = giá trị;
}
}
}
if [queryString[ "name" ]. = null && queryString[ "technology" ]. = null ] {
var data = ";
dữ liệu += " " " " " " " " " " " " " " " " " " " " + queryString[ "name" ] + " . " + chuỗi truy vấn[ "công nghệ" ];
$[ "#lblData" ]. html[dữ liệu];
}
}];
Ảnh chụp màn hình
2. Bánh quy
Ưu điểm. Dữ liệu bị ẩn trong Cookie.
Nhược điểm. Người dùng cuối có thể tắt cookie trong trình duyệt.
Ghi chú. Phương pháp này sẽ chỉ hoạt động nếu Cookie được bật trong trình duyệt.
Trang nguồn
Trang nguồn bao gồm một Nút HTML được gán với trình xử lý sự kiện Nhấp chuột jQuery
Khi Nút được nhấp, các giá trị của Hộp văn bản Tên và Danh sách DropDownList Công nghệ được gán cho Cookie và sau đó trang được chuyển hướng đến trang Đích [Trang 2. htm]
Ghi chú. Để đọc và ghi Cookie, plugin jQuery Cookie đã được sử dụng.
src = "//cdn.jsdelivr.net/jquery.cookie/1.3.1/jquery.cookie.js">
$[ hàm [] {
if [$. cookie[ "tên" ]. = null && $. cookie[ "công nghệ" ]. = null ] {
var data = ";
dữ liệu += " " " " " " " " " " " " " " " " " " " " + $. cookie[ "name" ] + " " " " " " " " " " " " " " " " " " " " + $. cookie[ "công nghệ" ];
$[ "#lblData" ]. html[dữ liệu];
$. removeCookie[ "tên" ];
$. removeCookie[ "công nghệ" ];
}
}];
Ảnh chụp màn hình
3. Cửa sổ bật lên
Ưu điểm. Các điều khiển được truy cập nên không cần gửi dữ liệu.
Nhược điểm. Mở ra một cửa sổ hoặc tab mới.
Trang nguồn
Trang nguồn bao gồm một Nút HTML được gán với trình xử lý sự kiện Nhấp chuột jQuery
Khi nhấn vào Nút, trang Đích [Trang 2. htm] được mở dưới dạng Cửa sổ bật lên
Trang đích
Bên trong trình xử lý sự kiện sẵn sàng cho tài liệu jQuery, các giá trị của Tên và Công nghệ được tìm nạp từ các điều khiển tương ứng của chúng bằng cách truy cập cửa sổ Trang mẹ.
Cuối cùng, các giá trị được hiển thị trong HTML SPAN
$[ hàm [] {
if [cửa sổ. cái mở. = null &&. cửa sổ. cái mở. đã đóng] {
var parent = $[window. cái mở. tài liệu]. nội dung[];
var data = ";
dữ liệu += " " " " " " " " " " " " " " " " " " " " + cha mẹ. tìm[ "#txtName" ]. val[] + " " " " " " " " " " " " " " " " " " " " + cha mẹ. tìm[ "#ddlTechnolgy" ]. val[];
$[ "#lblData" ]. html[dữ liệu];
}
}];
Ảnh chụp màn hình
4. mẫu bài
Ưu điểm. Tốt nhất trong lớp vì có đảm bảo 100% dữ liệu cũng được gửi ở dạng ẩn.
Nhược điểm. Yêu cầu công nghệ phía Máy chủ để tìm nạp dữ liệu đã đăng.
Ghi chú. Với phương pháp này, chúng tôi chỉ có thể gửi dữ liệu qua jQuery nhưng để nhận được, chúng tôi sẽ cần một số công nghệ phía máy chủ như ASP. Net, PHP, JSP, v.v. Ở đây tôi đang giải thích bằng cách sử dụng ASP. Mạng và C#.
Trang nguồn
Trang nguồn bao gồm một Nút HTML được gán với trình xử lý sự kiện Nhấp chuột jQuery
Khi nút được nhấp, Biểu mẫu HTML được tạo và nối vào Thẻ BODY của trang
Thuộc tính hành động được đặt thành Trang đích [Trang 2. aspx]
Sau đó, sử dụng hàm JavaScript AddParameter, các giá trị của Hộp văn bản tên và Danh sách thả xuống công nghệ được thêm vào Biểu mẫu bằng cách sử dụng các phần tử Trường ẩn và sau đó Biểu mẫu được gửi
Trang đích
Bên trong sự kiện Tải trang, các giá trị của Hộp văn bản tên và Danh sách thả xuống công nghệ được tìm nạp bằng cách sử dụng Yêu cầu. Bộ sưu tập biểu mẫu và được in trên trang bằng cách sử dụng Phản hồi. Viết chức năng