Tôi chỉ nói với bạn một số cách, hy vọng bạn sẽ có thể thực hiện nó:
- Sử dụng các thông số truy vấn để vượt qua biến.
Khi bạn đang điều hướng đến một trang khác, hãy thêm các thông số truy vấn vào URL.
window.open["MusicMe.html?variable=value", "_self"];
Trong trang tiếp theo của bạn, hãy kiểm tra QueryParam bằng cách nhận window.location.href và sử dụng Regex để phân chia các thông số sau ? và lấy dữ liệu đó.
- Sử dụng LocalStorage/Cookies
Trước khi điều hướng đến trang tiếp theo, hãy đặt một biến trong bộ phận địa phương của bạn
localStorage.setItem["variable","value"];
window.open["MusicMe.html", "_self"];
Trong trang thứ hai của bạn, trong sự kiện tải cửa sổ.
$[function[] {
if[localStorage.getItem["variable"]] {
// set the ID here
// after setting remember to remove it, if it's not required
localStorage.removeItem["variable"];
}
}];
Loading...
- Thử nghiệm
- Tải xuống
- Làm cách nào để vượt qua một biến jQuery trong HTML?
- Cách sử dụng biến jQuery trong câu trả lời mã HTML.
- .
- $ [tài liệu]. Sẵn sàng [function [] {.
- var inputValue = "trường 1" ;.
- $ ['#id1']. val [inputValue] ;.
- Làm thế nào để bạn vượt qua các biến giữa các trang HTML?
- Có hai cách để vượt qua các biến giữa các trang web. Phương pháp đầu tiên là sử dụng sessionStorage hoặc localStorage. Phương pháp thứ hai là sử dụng chuỗi truy vấn với URL.
- Làm thế nào để truyền đối tượng từ trang này sang trang khác trong JavaScript?
Chuyển giá trị JavaScript từ trang này sang trang khác có thể rất hữu ích trong một số ứng dụng. Một cách để hoàn thành nó là bằng cách sử dụng các phương thức LocalStorage Object, setItem [] và getItem [].jQuery
Tìm kiếm
Diễn đàn jQuery
© 2013 JQuery Foundation
Được tài trợ bởi và những người khác.
- Tất cả các diễn đàn
- Bài viết gần đây
Trong bài viết này, tôi sẽ giải thích với một ví dụ, cách gửi [truyền] giá trị [dữ liệu] từ trang này sang trang khác theo bốn cách khác nhau bằng cách sử dụng jQuery.
Bốn cách để gửi [truyền] giá trị [dữ liệu] từ trang này sang trang khác bằng cách sử dụng jQuery là
1. Tham số QueryString
2. Cookies
3. Cửa sổ bật lên
4. Hình thức
Đá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à chọn HTML [DropDownList]. Các giá trị của Hộp văn bản 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.
Đánh dấu HTMLscript type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
Name:
Đánh dấu HTMLinput type="text" id="txtName" name="Name" value="Mudassar Khan" />
Đánh dấu HTMLbr />
Technology:
Đánh dấu HTMLselect id="ddlTechnolgy" name="Technology">
& nbsp; & nbsp; & nbsp; Asp.netASP.Net
& nbsp; & nbsp; & nbsp; PHPPHP
& nbsp; & nbsp; & nbsp; JSPJSP
Đánh dấu HTMLselect>
& nbsp; & nbsp; & nbsp; Asp.net
& nbsp; & nbsp; & nbsp; PHP
Đánh dấu HTMLscript type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
Đánh dấu HTMLspan id = "lblData">
& nbsp; & nbsp; & nbsp; Asp.net
& nbsp; & nbsp; & nbsp; PHP
& nbsp; & nbsp; & nbsp; JSPNothing as such.
Trang đích [trang2.htm]Data is visible in URL.
Đánh dấu HTML bao gồm nhịp HTML [nhãn] để hiển thị dữ liệu đã gửi.
Ảnh chụp màn hình
1. QueryString
Đánh dấu HTMLinput type="button" id="btnQueryString" value="Send" />
Đánh dấu HTMLscript type="text/javascript">
& nbsp; & nbsp; & nbsp; Asp.netfunction [] {
& nbsp; & nbsp; & nbsp; PHP"#btnQueryString"].bind["click", function [] {
& nbsp; & nbsp; & nbsp; JSPvar url = "Page2.htm?name=" + encodeURIComponent[$["#txtName"].val[]] + "&technology=" + encodeURIComponent[$["#ddlTechnolgy"].val[]];
Trang đích [trang2.htm]
Đánh dấu HTML bao gồm nhịp HTML [nhãn] để hiển thị dữ liệu đã gửi.
Ảnh chụp màn hình
Đánh dấu HTMLscript>
& nbsp; & nbsp; & nbsp; Asp.net
& nbsp; & nbsp; & nbsp; PHPthe QueryString is extracted by splitting the URL of the current page using the Question mark [?] character.
& nbsp; & nbsp; & nbsp; JSP
Trang đích [trang2.htm]
Đánh dấu HTMLscript type="text/javascript">
& nbsp; & nbsp; & nbsp; Asp.netvar queryString = new Array[];
& nbsp; & nbsp; & nbsp; Asp.netfunction [] {
& nbsp; & nbsp; & nbsp; PHPif [queryString.length == 0] {
& nbsp; & nbsp; & nbsp; JSPif [window.location.search.split['?'].length > 1] {
Trang đích [trang2.htm]var params = window.location.search.split['?'][1].split['&'];
Đánh dấu HTML bao gồm nhịp HTML [nhãn] để hiển thị dữ liệu đã gửi.for [var i = 0; i < params.length; i++] {
Ảnh chụp màn hìnhvar key = params[i].split['='][0];
1. QueryStringvar value = decodeURIComponent[params[i].split['='][1]];
Ưu điểm: Không có gì như vậy.
Nhược điểm: Dữ liệu có thể nhìn thấy 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.
Khi nút được nhấp, các giá trị của tên văn bản và danh sách thả xuống công nghệ được đặt làm tham số QueryString và sau đó trang được chuyển hướng đến trang đích [trang2.htm].if [queryString["name"] != null && queryString["technology"] != null] {
& nbsp; & nbsp; & nbsp; $ [function [] {var data = "Values from
QueryString
";
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; $ ["#btnqueryString"]. BIND ["Nhấp", function [] {"Name: " + queryString["name"] + " Technology: " + queryString["technology"];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; var url = "page2.htm? name =" + encodeUricomponent [$ ["#txtname"]. val []]"#lblData"].html[data];
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.
Ảnh chụp màn hình
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; VAR DATA = "Giá trị từ QueryString";script>
& nbsp; & nbsp; & nbsp; Asp.net
& nbsp; & nbsp; & nbsp; PHP
& nbsp; & nbsp; & nbsp; JSPData is hidden in Cookie.
Trang đích [trang2.htm]Cookies can be disabled in browser by the end user.
Đánh dấu HTML bao gồm nhịp HTML [nhãn] để hiển thị dữ liệu đã gửi.This method will work only if Cookies are enabled in browser.
Đánh dấu HTML bao gồm nhịp HTML [nhãn] để hiển thị dữ liệu đã gửi.
Ảnh chụp màn hình
1. QueryString
Ưu điểm: Không có gì như vậy.In order to read and write Cookies, jQuery Cookie plugin has been used.
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; VAR DATA = "Giá trị từ QueryString";input type="button" id="btnCookie" value="Send" />
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; VAR DATA = "Giá trị từ QueryString";script type="text/javascript" src="//cdn.jsdelivr.net/jquery.cookie/1.3.1/jquery.cookie.js">
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; VAR DATA = "Giá trị từ QueryString";script type="text/javascript">
& nbsp; & nbsp; & nbsp; Asp.netfunction [] {
& nbsp; & nbsp; & nbsp; PHP"#btnCookie"].bind["click", function [] {
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; $ .cookie ["Tên", $ ["#txtname"]. val []];"name", $["#txtName"].val[]];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; $ .cookie ["công nghệ", $ ["#ddltechnolgy"]. val []];"technology", $["#ddlTechnolgy"].val[]];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; window.location.href = "Trang2.htm";"Page2.htm";
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; }];
& nbsp; & nbsp; & nbsp; }];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; VAR DATA = "Giá trị từ QueryString";script>
Trang đích
Bên trong trình xử lý sự kiện sẵn sàng của tài liệu JQuery, các giá trị được tìm nạp từ các cookie bằng plugin cookie jQuery và được hiển thị trong HTML Span.the values are fetched from the Cookies using the jQuery Cookie plugin and displayed in HTML SPAN.
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; VAR DATA = "Giá trị từ QueryString";script type = "text/javascript" src = "//cdn.jsdelivr.net/jquery.cookie/1.3.1/jquery.cookie.js">
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; VAR DATA = "Giá trị từ QueryString";script type="text/javascript">
Trang đíchfunction [] {
Bên trong trình xử lý sự kiện sẵn sàng của tài liệu JQuery, các giá trị được tìm nạp từ các cookie bằng plugin cookie jQuery và được hiển thị trong HTML Span.if [$.cookie["name"] != null && $.cookie["technology"] != null] {
& nbsp; & nbsp; & nbsp; $ [function [] {var data = "Values from Cookies
";
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; if [$ .cookie ["name"]! = null && $ .cookie ["công nghệ"]! = null] {"Name: " + $.cookie["name"] + " Technology: " + $.cookie["technology"];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; data var = "giá trị từ cookie";"#lblData"].html[data];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Dữ liệu + = "Tên:" + $ .Cookie ["Tên"] + "Công nghệ:" + $ .Cookie ["Technology"];"name"];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; $ ["#lbldata"]. HTML [dữ liệu];"technology"];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; $ .RemoveCookie ["Tên"];
& nbsp; & nbsp; & nbsp; }];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; VAR DATA = "Giá trị từ QueryString";script>
Trang đích
Bên trong trình xử lý sự kiện sẵn sàng của tài liệu JQuery, các giá trị được tìm nạp từ các cookie bằng plugin cookie jQuery và được hiển thị trong HTML Span.
& nbsp; & nbsp; & nbsp; $ [function [] {Controls are accessed so no need to send data.
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; if [$ .cookie ["name"]! = null && $ .cookie ["công nghệ"]! = null] {Opens up a new window or tab.
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; data var = "giá trị từ cookie";
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Dữ liệu + = "Tên:" + $ .Cookie ["Tên"] + "Công nghệ:" + $ .Cookie ["Technology"];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; $ ["#lbldata"]. HTML [dữ liệu];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; VAR DATA = "Giá trị từ QueryString";input type="button" id="btnPopup" value="Send" />
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; VAR DATA = "Giá trị từ QueryString";script type="text/javascript">
Trang đíchfunction [] {
Bên trong trình xử lý sự kiện sẵn sàng của tài liệu JQuery, các giá trị được tìm nạp từ các cookie bằng plugin cookie jQuery và được hiển thị trong HTML Span."#btnPopup"].bind["click", function [] {
& nbsp; & nbsp; & nbsp; $ [function [] {'Page2.htm'];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; }];
& nbsp; & nbsp; & nbsp; }];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; VAR DATA = "Giá trị từ QueryString";script>
Trang đích
Bên trong trình xử lý sự kiện sẵn sàng của tài liệu JQuery, các giá trị được tìm nạp từ các cookie bằng plugin cookie jQuery và được hiển thị trong HTML Span.the values of the Name and Technology are fetched from their respective controls by accessing the Parent Page window.
& nbsp; & nbsp; & nbsp; $ [function [] {
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; VAR DATA = "Giá trị từ QueryString";script type="text/javascript">
Trang đíchfunction [] {
Bên trong trình xử lý sự kiện sẵn sàng của tài liệu JQuery, các giá trị được tìm nạp từ các cookie bằng plugin cookie jQuery và được hiển thị trong HTML Span.if [window.opener != null && !window.opener.closed] {
& nbsp; & nbsp; & nbsp; $ [function [] {var parent = $[window.opener.document].contents[];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; if [$ .cookie ["name"]! = null && $ .cookie ["công nghệ"]! = null] {var data = "Values using Popup Window
";
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; data var = "giá trị từ cookie";"Name: " + parent.find["#txtName"].val[] + " Technology: " + parent.find["#ddlTechnolgy"].val[];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; data var = "giá trị từ cookie";"#lblData"].html[data];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; $ .RemoveCookie ["Tên"];
& nbsp; & nbsp; & nbsp; }];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; VAR DATA = "Giá trị từ QueryString";script>
Trang đích
Bên trong trình xử lý sự kiện sẵn sàng của tài liệu JQuery, các giá trị được tìm nạp từ các cookie bằng plugin cookie jQuery và được hiển thị trong HTML Span.
& nbsp; & nbsp; & nbsp; $ [function [] {Best in class as there is 100% guarantee of data being send that too in hidden form.
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; if [$ .cookie ["name"]! = null && $ .cookie ["công nghệ"]! = null] {Requires Server side technology for fetching posted data.
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; data var = "giá trị từ cookie";With this method we can only send data via jQuery but for receiving we will need some sever side technology like ASP.Net, PHP, JSP, etc. Here I am explaining using ASP.Net and C#.
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; data var = "giá trị từ cookie";
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Dữ liệu + = "Tên:" + $ .Cookie ["Tên"] + "Công nghệ:" + $ .Cookie ["Technology"];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; $ ["#lbldata"]. HTML [dữ liệu];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; $ .RemoveCookie ["Tên"];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; $ .RemoveCookie ["công nghệ"];
& nbsp; & nbsp; & nbsp; $ [function [] {input type="button" id="btnPost" value="Send" />
& nbsp; & nbsp; & nbsp; $ [function [] {script type="text/javascript">
Trang đíchfunction [] {
Bên trong trình xử lý sự kiện sẵn sàng của tài liệu JQuery, các giá trị được tìm nạp từ các cookie bằng plugin cookie jQuery và được hiển thị trong HTML Span."#btnPost"].bind["click", function [] {
& nbsp; & nbsp; & nbsp; $ [function [] {//Create a Form.
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; if [$ .cookie ["name"]! = null && $ .cookie ["công nghệ"]! = null] {var $form = $[""].attr["id", "data_form"]
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; data var = "giá trị từ cookie";"action", "Page2.aspx"]
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Dữ liệu + = "Tên:" + $ .Cookie ["Tên"] + "Công nghệ:" + $ .Cookie ["Technology"];"method", "post"];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; $ ["#lbldata"]. HTML [dữ liệu];"body"].append[$form];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; $ .RemoveCookie ["Tên"];//Append the values to be send.
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; $ .RemoveCookie ["công nghệ"];"name", $["#txtName"].val[]];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; AddParameter [$ form, "công nghệ", $ ["#ddltechnolgy"]. Val []];"technology", $["#ddlTechnolgy"].val[]];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; // Gửi biểu mẫu.//Send the Form.
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; $ form [0] .submit [];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; }];
& nbsp; & nbsp; & nbsp; }];
& nbsp; & nbsp; & nbsp; hàm addparameter [biểu mẫu, tên, giá trị] {function AddParameter[form, name, value] {
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; var $ input = $ [""]. attr ["type", "hidden"]var $input = $[""].attr["type", "hidden"]
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; .ATTR ["Tên", Tên]"name", name]
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; .attr ["giá trị", giá trị];"value", value];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; form.Append [$ input];
& nbsp; & nbsp; & nbsp; }
Trang đích
Bên trong sự kiện tải trang, các giá trị của tên 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 bộ sưu tập ability.form và được in trên trang bằng cách sử dụng chức năng Rephood.Write.
PAREDVOID PAGE_LOAD [Người gửi đối tượng, EventArgs E] void Page_Load[object sender, EventArgs e]
{
& nbsp; & nbsp; & nbsp; if [! this.ispostback]if [!this.IsPostBack]
& nbsp; & nbsp; & nbsp; {
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; if [! String.isNullorEmpty [request.form ["name"]] &&! String.isNullorEmpty [request.form ["công nghệ"]]]if [!string.IsNullOrEmpty[Request.Form["name"]] && !string.IsNullOrEmpty[Request.Form["technology"]]]
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; {
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Trả lời.Write ["Giá trị sử dụng bài đăng biểu mẫu"];"Values using Form Post
"];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Trả lời.Write ["Tên:" + request.form ["name"] + "công nghệ:" + request.form ["công nghệ"]];"Name: " + Request.Form["name"] + " Technology: " + Request.Form["technology"]];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;}
& nbsp; & nbsp; & nbsp; }
Trang đích
Trang đích
Bên trong sự kiện tải trang, các giá trị của tên 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 bộ sưu tập ability.form và được in trên trang bằng cách sử dụng chức năng Rephood.Write.
PAREDVOID PAGE_LOAD [Người gửi đối tượng, EventArgs E]
& nbsp; & nbsp; & nbsp; if [! this.ispostback]
& nbsp; & nbsp; & nbsp; {
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; if [! String.isNullorEmpty [request.form ["name"]] &&! String.isNullorEmpty [request.form ["công nghệ"]]]