Question

我创建了两个HTML网页page1.html和page2.html。在page1.html中，我有三个文本字段和一个提交按钮，在page2.html我有一个列表视图。因此，当我填写文本并单击page1.html中的提交按钮时，数据应该出现在列表视图中。请帮助我提前致谢

Answer 1

解决方案：

<强> （1） 即可。将page2 html元素加载到当前的DOM中也是可能的，但是您需要了解这一点，** JQM如何处理DOM？

示例： 考虑两个名为first和second的HTML文件，每个文件由五个页面组成。在加载时，只有第一个html文件将完全加载到DOM中，即使文件中的第一页显示给您，页面的其余部分将被JQM隐藏和部分加载。直到现在一切正常，但是一旦你尝试在不同的文件中导航页面，就会出现锁定。

例如，现在您在第1页（first.html），尝试使用（$ .mobile.load ..）在第二个文件中导航第3页。它只是将页面3 HTML元素从第二个文件加载到当前DOM中，其余部分（包括该页面事件）将被忽略。

（2）。 使用localStorage最适合将值传递给外部文件。

代码：

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

var listvalues = localStorage.getItem('lists');
//pase the value 
var finalvalue = JSON.parse(listvalues);
// it look like this { "1": "value1", "2": "value2", "3": "value3" };

（3）。 您也可以尝试sessionStorage来做同样的事情。

（4）。 如果是多页架构，请尝试在公共文件中声明变量使用全局变量。

Answer 2

在page1.html脚本中，您可以通过URL（GET）方法通过脚本传递textfields值，并在page2.html中访问它，如下所示。

page1.html：

$(#submit').click(function{
   window.location.href="page2.html?text1="+$('#text1').val()...etc
});

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
 }
});

Answer 3

// 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]); }

如何使用Phonegap中的JavaScript将数据从一个html传递到另一个html页面？

3 个答案: