Question

我是phonegap的新手。我有两页，即firstPage和secondPage。 Firstpage从用户获取名字，姓氏，电子邮件和密码，并向验证脚本发送ajax请求。如果响应是＆＃34; SUCCESS＆＃34;，我将转到第二页。当我使用localstorage加载第二页时，我试图显示用户输入的名字，姓氏和电子邮件值。但是，当第二页加载时，我没有输入值。我是在过去三天尝试这个。

index.html

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

            // Store object
            var localStorage = {
                firstname : '',
                email : ''
            }

            function onSuccess(data, status)
            {
                data = $.trim(data);
                alert(data);

                if(data=="SUCCESS"){
                    // store some data
                    var firstname = $("#firstName").val();
                    var email = $("#email").val();

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

                    //change page
                    $.mobile.changePage("second.html");
                }

            }

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

        $(document).on('pageinit',function() {
                          $("#submit").click(function(){

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

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

                                             return false;
                                             });

                       });

            $(document).on('pageaftershow', '#secondPage', function(){
                           alert('My name is ' + localStorage.firstname + ' ' + localStorage.email);
            });

            </script>

        <!-- call ajax 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="firstName">First Name</label>
                        <input type="text" name="firstName" id="firstName" 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>


    </body>
</html>

second.html

    <!DOCTYPE html>

<html>
    <head>
        <title>Submit a form via AJAX</title>
        <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>
    </head>

    <body>

        <script>


        </script>

        <!-- call second page -->
        <div data-role="page" id="secondPage" data-add-back-btn="true" data-back-btn-text="Back">
            <div data-role="header">
                <h3>Second Page</h3>
            </div>
            <div data-role="content" id="content2">
                <label for="firstName">First Name</label>
                <input type="text" name="firstName" id="firstName" 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>

我的验证脚本

<?php
        $validUser= "123";
        $validEmail = "123";
        $validPassword = "123";

        $getUser = $_POST['username'];
        $getEmail = $_POST['email'];
        $getPassword = $_POST['password'];

        $success = "SUCCESS";
        $fail = "FAIL";

        if( $getEmail == $validEmail && $getPassword == $validPassword ){
                $results = $success;
        }else {
                $results = $fail;
        }

        echo $results;
?>

我已经粘贴了上面的完整代码，我在ios模拟器上运行它。

Answer 1

我们使用以下方式将数据从一个屏幕传输到另一个屏幕：

// Screen 1
window.localStorage.setItem("key_name", "stringValue");

//Screen 2 to retirve the data of screen first.
var stringValue = window.localStorage.getItem("key_name");

希望这对你有用。如果它完全有用的话，请告诉我。感谢。

从第一页到第二页输入值

1 个答案: