Question

我正在Eclipse上使用jQuery mobile和PhoneGap（Android）开发应用程序。我正在使用我的Chrome浏览器测试应用程序（index.html）。

我想构建一个登录系统，所以我有两个页面：登录和注册，都有html表单。现在我想将注册表单数据存储在localStorage（电子邮件和登录标志）中，并将数据（电子邮件和密码）也发送到我的node.js网络服务器（尚未实现，因为不知道如何）。

我试过这样做，但它不起作用。我在浏览器（Chrome）中打开了注册表单并调用了JavaScript控制台（资源 - ＆gt;本地存储），但没有数据。

然后我想在登录页面中显示数据，但这也不起作用。

这是我的代码： http://jsbin.com/IBEgoyIf/2/edit?html,js,output

或在这里：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="js/jquery.validate.js"></script>
    <script src="js/matchPassword.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>
</head>

<body>



    <div data-role="page" id="login">


        <div data-role="content">
            <form action="http://foo.com/login.js" method="POST">
                <div data-role="fieldcontain">
                    <label for="url">E-Mail</label>
                    <input name="uid" id="email" placeholder="" value="" type="email" class="required">
                </div>
                <div data-role="fieldcontain">
                    <label for="url">Password</label>
                    <input name="upwd" id="pwd" placeholder="" value="" type="password" class="required">
                </div>
                <input type="submit" data-theme="b" value="Login">
            </form>
            <p id="myResults">myResults: </p>

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">
            <div data-role="navbar" data-iconpos="top">
                <ul>
                    <li><a href="#registration" data-transition="fade" data-theme="" data-icon="edit">Register</a></li>
                </ul>
            </div>
        </div>


        <script type="text/javascript" charset="utf-8">
        $('#login').on("pagecreate", function() {

        // Wait for device API libraries to load
            //document.addEventListener("deviceready", onDeviceReady, false);

            // device APIs are available
            //function onDeviceReady() {
                var userEmail = window.localStorage.getItem("localEmail");
                var userFlag = window.localStorage.getItem("localLoggedIn");
                document.getElementById("myResults").innerHTML = userEmail;
            //}
            //}
        });
        </script>

    </div>

    <div data-role="page" id="registration">

        <div data-role="content">
            <form action="#" method="post" id="registerForm">

                <fieldset data-role="fieldcontain"> 
                    <label for="email">E-Mail:</label>
                    <input type="email" name="email" id="email" class="required email" minlength="5">
                </fieldset>

                <fieldset data-role="fieldcontain"> 
                    <label for="password">Password:</label>
                    <input type="password" name="password" id="password" class="required" minlength="5">
                </fieldset>

                <fieldset data-role="fieldcontain"> 
                    <label for="password2">Repeat Password:</label>
                    <input type="password" name="password2" id="password2" class="required passmatch" minlength="5">
                </fieldset>

                <input type="submit" data-theme="b" value="Register" onclick="store()">
            </form>
        </div>  


        <script type="text/javascript">
            function store(){
                // Wait for device API libraries to load
                //document.addEventListener("deviceready", onDeviceReady, false);

                // device APIs are available
                //function onDeviceReady() {
                    var inputEmail = document.getElementById("email");
                    localStorage.setItem("localEmail", inputEmail.value);
                    localStorage.setItem("localLoggedIn", true);
                    window.location="#login";
                //}
            }
        </script>

    </div>

</body>

</html>

使用jQuery mobile和PhoneGap存储表单数据并将其发送到localStorage和webserver

0 个答案: