[英]How to pass the data from one html to another html page using JavaScript in Phonegap?
I have created two HTML pages page1.html
and page2.html
. 我创建了两个HTML页面
page1.html
和page2.html
。 In page1.html
,I have three text fields and one submit button and in page2.html
i have a list view. 在
page1.html
,我有三个文本字段和一个提交按钮,在page2.html
我有一个列表视图。 So, when i fill the texts and clicked on submit button in page1.html
,the data should come in list view. 因此,当我填写文本并单击
page1.html
提交按钮时,数据应该在列表视图中。 Please assist me. 请帮助我 Thanks in advance
提前致谢
SOLUTIONs : 解决方案:
(1) . (1) 。 Loading page2 html element into your current DOM is also possible but you need to learn about this,** How the DOM is handled by the JQM ?
将page2 html元素加载到当前的DOM中也是可能的,但是您需要了解这一点,** JQM如何处理DOM?
EXAMPLE : Consider two HTML file named has first and second and each file consist of five page . 示例:考虑两个名为first和second的HTML文件,每个文件由五个页面组成。 At the time of loading only the first html file will loaded into DOM fully even though the first page in the file is shown to you , rest of the page's will be hidden and partially loaded by JQM.
在加载时,只有第一个html文件将完全加载到DOM中,即使文件中的第一页显示给您,页面的其余部分将被JQM隐藏并部分加载。 Till now everything is ok but once you try to navigate page in different file, there's a lock.
直到现在一切正常但是一旦你尝试在不同的文件中导航页面,就会有一个锁定。
For example ,now you are in page 1(first.html), trying to navigate page 3 in second file using ($.mobile.load..). 例如 ,现在您在第1页(first.html),尝试使用($ .mobile.load ..)在第二个文件中导航第3页。 It simply load the page 3 HTML element from second file into current DOM rest of them (including that page event) will be ignored.
它只是将页面3 HTML元素从第二个文件加载到当前的DOM中,其余的(包括该页面事件)将被忽略。
(2). (2)。 Using localStorage is best for passing value to external file.
使用localStorage最适合将值传递给外部文件。
Code : 代码:
page1.httml page1.httml
var listvalues = { "1": "value1", "2": "value2", "3": "value3" }
*// OR IF INTPUT IS INSIDE FORM BETTER USER JQUERY SERIALIZER var listvalues = $("#form").serialize();*
localStorage.setItem('lists', JSON.stringify(listvalues));
page2.html page2.html
var listvalues = localStorage.getItem('lists');
//pase the value
var finalvalue = JSON.parse(listvalues);
// it look like this { "1": "value1", "2": "value2", "3": "value3" };
(3). (3)。 You can also try
sessionStorage
to do the same., 您也可以尝试使用
sessionStorage
来执行相同操作。
(4). (4)。 If it is multi-page architecture try using global variable by declaring variable in common file.
如果是多页面体系结构,请尝试通过在公共文件中声明变量来使用全局变量。
In the page1.html script you can pass the textfields values through URL(GET) method handle through script and access it in page2.html like the following. 在page1.html脚本中,您可以通过URL(GET)方法通过脚本传递textfields值,并在page2.html中访问它,如下所示。
page1.html: page1.html:
$(#submit').click(function{
window.location.href="page2.html?text1="+$('#text1').val()...etc
});
page2.html: page2.html:
$(document).ready(function(){
var idx = document.URL.indexOf('?text1=');
if (idx !== -1) {
//take each textfield values from the "document.URL" using substring function
}
});
// page1.html
// build an object
window.onload = function() {
var form = document.getElementById("my-form");
form.submit.onclick = function() {
var obj = {};
obj.full_name = form.full-name; // string
obj.age = form.age; // number
obj.location = form.location; // string
// store it into locale storage as a string
localStorage.setItem("obj", JSON.stringify(obj));
form.submit();
}
}
// page2.html
// retrieve it back from storage
var obj = localStorage.getItem("obj");
// use it
console.log(JSON.parse(obj));
// or
// for (var prop in obj) { console.log(obj[prop]); }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.