Получение введенных значений с первой страницы на вторую страницу

#jquery #ios #ajax #jquery-mobile #cordova

#jquery #iOS #ajax #jquery-мобильный #кордова

Вопрос:

Я новичок в phonegap. У меня есть две страницы, а именно FirstPage и SecondPage. Firstpage принимает имя, фамилию, адрес электронной почты и пароль от пользователя и отправляет ajax-запрос в сценарий проверки. Если ответ «УСПЕШНЫЙ», я перейду на вторую страницу. Я пытаюсь отобразить значения firstname, lastname и email, введенные пользователем, при загрузке secondpage с использованием localstorage. Но я не получаю введенные значения при загрузке secondpage. Я пытаюсь сделать это за последние три дня.

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 amp;amp; $getPassword == $validPassword ){
                $results = $success;
        }else {
                $results = $fail;
        }

        echo $results;
?>
  

Я вставил полный приведенный выше код и запускаю его на симуляторе ios.

Ответ №1:

МЫ ПЕРЕДАЕМ ДАННЫЕ С ОДНОГО ЭКРАНА НА ДРУГОЙ, ИСПОЛЬЗУЯ СЛЕДУЮЩИЙ СПОСОБ:

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

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

Надеюсь, это будет вам полезно. ответьте мне, если это вообще полезно.
Спасибо.

Комментарии:

1. Я работаю на мобильном устройстве, а не на экране рабочего стола. могу ли я использовать window и на мобильных устройствах?

2. да, вы просто попробуйте и дайте мне знать, получаете ли вы то, что хотите.