Приложение Phonegap с помощью мобильного телефона Jquery - страница входа и профиль.Мне нужен кто-то, кто знает телефонный разрыв - PullRequest
0 голосов
/ 01 марта 2019

Что я пытаюсь сделать, это создать систему входа в систему с помощью jquery mobile, а затем при успешном входе в систему я хочу отобразить информацию о пользователях на странице профиля.Я знаю о некоторых функциях, которые мне нужно использовать для этого, хотя, поскольку я использую телефонную пробелу, мне нужно использовать AJAX для передачи данных, что меня действительно смущает.Если кто-то может помочь мне с этим, то это было бы здорово, я боролся с этим уже несколько недель.

Ниже приведен мой HTML-код.Я хочу передать пользователю страницу 2 с информацией его профиля при успешном входе в систему.

<!-------------- First page for form ----------->
<div data-role="page" id="home">
<!-------------- First page header ----------->
<div data-role="header">
<h1>Login in</h1>
</div>
<!-------------- First page main content ----------->
<div data-role="main" class="ui-content" id="login"/>
<form method="post" action="#profile" data-ajax="false"/>
<label for="email">Email: <span>*</span></label>
<input type="email" id="email" name="email" placeholder="example@domain.com"/>
<label for="password">Password : <span>*</span></label>
<input type="password" name="password" id="password" placeholder="********"/>
<input type="submit" data-inline="true" id="login" value="Submit" data-theme="b"/>
</form>
</div>
<!-------------- First page footer ----------->
<div data-role="footer" id="footer">
<h1>...</h1>
</div>
<!-------------------------------------------------------------
End of First page
-------------------------------------------------------------->
<!-------------- Second page ----------->
<div data-role="page" id="profile">
<!-------------- Second page header ----------->
<div data-role="header">
<h1>Profile</h1>
</div>
<!-------------- Second page main content ----------->

<!-------------- Second page footer ----------->
<div data-role="footer">
<h1>...</h1>
</div>
</div>
<!-------------------------------------------------------------
End of Second page
-------------------------------------------------------------->

Ниже приведен мой js-файл.Пожалуйста, не устанавливайте это для мобильного jquery.Я много раз менял подход к этой задаче, чтобы я мог использовать некоторую помощь по настройке этого для работы с JQM.

mysubmit=function(){

        $("#submit").click(function(e){
            e.preventDefault();
            console.log('clicked');
            var email= $.trim($("#email").val());
            var password= $.trim($("#password").val());

            $("#status").text("Logging you in...");
            var loginString ="email="+email+"&password ="+password;
            $.ajax({
                type: "GET",crossDomain: true, cache: false,
                        url:"http://localhost/form/www/auth.php",

                success: function(data){
                    console.log(data);
                    //get HTML 
                    tml
                    var myarray = JSON.parse(data);
                    console.log(myarray);
                    if(data == "success") {
                        $("#status").text("You're logged in!");
                        localStorage.loginstatus = "true";
                        window.location.href = "welcome.html";
                    }
                    else if(data == "error")
                    {
                        $("#status").text("Ops, your login has failed");
                    }
                }
            });
        });

Ниже приведен мой php-код.Это далеко не закончено, хотя я ударил его кирпичной стеной и, похоже, не могу найти способ заставить это работать.

    <?php

$host = "localhost";
$dbusername = "root";
$dbpassword = "";
$dbname = "registration";

$conn = new mysqli ($dbhost, $dbuser, $dbpass, $db);

if($conn->connect_error){
    echo "Connection has failed";
}
else{
    echo "Connect was successful";
}

if(isset($_POST["submit"]))
    {
        $username=$_POST["username"];
        $password=$_POST["password"];

        $query = "SELECT *  FROM `users` WHERE `password` = '$password' and email='$email'";
        $result = mysql_query(query);
        $numRows = mysql_num_rows($result);
        if($numRows==1){
            session_start();
            $_SESSION["username"] = $username;
            header("Location: ./index.html");
            else{
                echo "Invalid Login Information";
            }
        }

    }

Был бы очень признателен за любую помощь, которую люди могут оказать мне в этом.

Заранее спасибо.

1 Ответ

0 голосов
/ 01 марта 2019

Тогда вам повезло, я все еще веду свой блог jQuery Mobile по вопросам жизнеобеспечения.

Вот рабочий пример: https://www.gajotres.net/complex-jquery-mobile-authorization-example/

Вы можете использовать его.Также не забудьте принять ответ, если это то, что вы искали.

Index.php:

    <!DOCTYPE html>
    <html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script>
            $(document).on("mobileinit", function () {
              $.mobile.hashListeningEnabled = false;
              $.mobile.pushStateEnabled = false;
              $.mobile.changePage.defaults.changeHash = false;
            });
        </script> 
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
        <script src="js/index.js"></script>
    </head>
    <body>
        <div data-role="page" id="login" data-theme="b">
            <div data-role="header" data-theme="a">       
                <h3>Login Page</h3>
            </div>

            <div data-role="content">
                <form id="check-user" class="ui-body ui-body-a ui-corner-all" data-ajax="false">
                    <fieldset>
                        <div data-role="fieldcontain">
                            <label for="username">Enter your username:</label>
                            <input type="text" value="" name="username" id="username"/>
                        </div>                                 
                        <div data-role="fieldcontain">                                     
                            <label for="password">Enter your password:</label>
                            <input type="password" value="" name="password" id="password"/>
                        </div>
                        <input type="button" data-theme="b" name="submit" id="submit" value="Submit">
                    </fieldset>
                </form>                             
            </div>

            <div data-theme="a" data-role="footer" data-position="fixed">

            </div>
        </div>
        <div data-role="page" id="second">
            <div data-theme="a" data-role="header">
                <a href="#login" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-delete" id="back-btn">Back</a>      
                <h3>Welcome Page</h3>
            </div>

            <div data-role="content">

            </div>

            <div data-theme="a" data-role="footer" data-position="fixed">
                <h3>Page footer</h3>
            </div>
        </div>
    </body>
    </html>

auth.php

    <?php
    function authorize()
    {
      //normally this info would be pulled from a database.
      //build JSON array
      $status = array("status" => "success"); 

      return $status;
    }

    $possible_params = array("authorization", "test");

    $value = "An error has occurred";

    if (isset($_POST["action"]) && in_array($_POST["action"], $possible_params))
    {
      switch ($_POST["action"])
        {
          case "authorization":
            $value = authorize();
            break;
        }
    }

    //return JSON array
    exit(json_encode($value));
    ?>

index.js

    var userHandler = {
        username : '',
        status : ''
    }

    $(document).on('pagecontainershow', function (e, ui) {
        var activePage = $(':mobile-pagecontainer').pagecontainer('getActivePage');
        if(activePage.attr('id') === 'login') {
            $(document).on('click', '#submit', function() { // catch the form's submit event
                if($('#username').val().length > 0 && $('#password').val().length > 0){

                    userHandler.username = $('#username').val();

                    // Send data to server through the Ajax call
                    // action is functionality we want to call and outputJSON is our data
                    $.ajax({url: 'auth.php',
                        data: {action : 'authorization', formData : $('#check-user').serialize()},
                        type: 'post',                  
                        async: 'true',
                        dataType: 'json',
                        beforeSend: function() {
                            // This callback function will trigger before data is sent
                            $.mobile.loading('show'); // This will show Ajax spinner
                        },
                        complete: function() {
                            // This callback function will trigger on data sent/received complete   
                            $.mobile.loading('hide'); // This will hide Ajax spinner
                        },
                        success: function (result) {
                            // Check if authorization process was successful
                            if(result.status == 'success') {
                                userHandler.status = result.status;
                                $.mobile.changePage("#second");                        
                            } else {
                                alert('Logon unsuccessful!');
                            }
                        },
                        error: function (request,error) {
                            // This callback function will trigger on unsuccessful action               
                            alert('Network error has occurred please try again!');
                        }
                    });                  
                } else {
                    alert('Please fill all necessary fields');
                }          
                return false; // cancel original event to prevent form submitting
            });  
        } else if(activePage.attr('id') === 'second') {
            activePage.find('.ui-content').text('Wellcome ' + userHandler.username);
        }
    });

    $(document).on('pagecontainerbeforechange', function (e, ui) {
        var activePage = $(':mobile-pagecontainer').pagecontainer('getActivePage');
        if(activePage.attr('id') === 'second') {
            var to = ui.toPage;

            if (typeof to  === 'string') {
                var u = $.mobile.path.parseUrl(to);
                to = u.hash || '#' + u.pathname.substring(1);

                if (to === '#login' && userHandler.status === 'success') {
                    alert('You cant open a login page while youre still logged on!');
                    e.preventDefault();
                    e.stopPropagation();

                    // remove active status on a button if a transition was triggered with a button
                    $('#back-btn').removeClass('ui-btn-active ui-shadow').css({'box-shadow':'0 0 0 #3388CC'});
                } 
            }
        }
    });
...