Question

我是phonegap的新手。我试图将localStorage数据存储在第二页的第一页中。但是当第二页加载时，甚至没有得到警报“你好”。我在ios模拟器上运行它。

<html>
    <head>
        <title>Submit a form via AJAX</title>
        <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
        <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
    </head>
    <body>

     <script>
            function onSuccess(data, status)
            {
                data = $.trim(data);
                //$("#notification").text(data);
                alert(data);
                console.log(data);

                if(data=="SUCCESS"){

                    // store some data
                    var username = $("#username").val();
                    var email = $("#email").val();

                    // store some data
                    localStorage.setItem('username',$("#username").val());
                    localStorage.setItem('email',$("#email").val());

                    //change page
                    $.mobile.changePage("#secondPage");

                }
            }

            function onError(data, status)
            {
                // handle an error
            }

            $(document).ready(function(){
                          $("#submit").click(function(){

                                             callAjax();
                                             return false;
                          });

                         $("#secondPage").on("pageshow", function (event) {
                          alert("Hello");         
                          $("#username").text(localStorage.getItem("username"));
                          $("#email").text(localStorage.getItem("email"));            
                         });
            });


            function callAjax() {
                var formData = $("#callAjaxForm").serialize();

                $.ajax({
                       type: "POST",
                       url: “myURL”,
                       cache: false,
                       data: formData,
                       success: onSuccess,
                       error: onError
                       });
            }


        </script>

        <!-- call first page -->
        <div data-role="page" id="firstPage">
            <div data-role="header">
                <h1>Call Ajax</h1>
            </div>

            <div data-role="content">
                <form id="callAjaxForm">
                    <div data-role="fieldcontain">
                        <label for="username">User Name</label>
                        <input type="text" name="username" id="username" value=""  />

                        <label for="lastName">Last Name</label>
                        <input type="text" name="lastName" id="lastName" value=""  />

                        <label for="email">Email</label>
                        <input type="text" name="email" id="email" value=""  />

                        <label for="password">Password</label>
                        <input type="password" name="password" id="password" value=""  />

                        <button data-theme="b" id="submit" type="submit">Submit</button>
                    </div>
                </form>
            </div>

            <div data-role="footer">
                <h1>footer</h1>
            </div>
        </div>

        <!-- call second page -->
        <div data-role="page" id="secondPage">
            <div data-theme="a" data-role="header">
                <h3>
                    Second Page
                </h3>
            </div>
            <div data-role="content" id="content2">
                <label for="username">User Name</label>
                <input type="text" name="username" id="username" value=""  />

                <label for="lastName">Last Name</label>
                <input type="text" name="lastName" id="lastName" value=""  />

                <label for="email">Email</label>
                <input type="text" name="email" id="email" value=""  />
            </div>
        </div>
    </body>
</html>

我已粘贴上面的完整代码。

Answer 1

我非常确定ajax调用不起作用。你必须提供一个有效的网址。因此我对它不以为然。试试这段代码。

<body>

     <script>


            $(document).ready(function(){
                          $("#submit").click(function(){

                                                var username = $("#username").val();
                    var email = $("#email").val();

                    // store some data
                    window.localStorage["username"]="ss"
                    window.localStorage["username"] = $("#username").val();
                    window.localStorage["username"] = $("#email").val();


                    //change page
                    $.mobile.changePage("#secondPage");
                                             return false;
                          });

                         $("#secondPage").on("pageshow", function (event) {
                          alert(window.localStorage["username"]);         
                         $("#secondPage").find("#username").val( window.localStorage["username"] );
                          $("#secondPage").find("#email").val( window.localStorage["username"] );            
                         });
            });





        </script>

        <!-- call first page -->
        <div data-role="page" id="firstPage">
            <div data-role="header">
                <h1>Call Ajax</h1>
            </div>

            <div data-role="content">
                <form id="callAjaxForm">
                    <div data-role="fieldcontain">
                        <label for="username">User Name</label>
                        <input type="text" name="username" id="username" value=""  />

                        <label for="lastName">Last Name</label>
                        <input type="text" name="lastName" id="lastName" value=""  />

                        <label for="email">Email</label>
                        <input type="text" name="email" id="email" value=""  />

                        <label for="password">Password</label>
                        <input type="password" name="password" id="password" value=""  />

                        <button data-theme="b" id="submit" type="submit">Submit</button>
                    </div>
                </form>
            </div>

            <div data-role="footer">
                <h1>footer</h1>
            </div>
        </div>

        <!-- call second page -->
        <div data-role="page" id="secondPage">
            <div data-theme="a" data-role="header">
                <h3>
                    Second Page
                </h3>
            </div>
            <div data-role="content" id="content2">
                <label for="username">User Name</label>
                <input type="text" name="username" id="username" value=""  />

                <label for="lastName">Last Name</label>
                <input type="text" name="lastName" id="lastName" value=""  />

                <label for="email">Email</label>
                <input type="text" name="email" id="email" value=""  />
            </div>
        </div>
    </body>

第二页加载时获取本地存储数据

1 个答案: