使用Phonegap-AJAX登录移动应用程序

时间:2012-08-31 17:14:01

标签: android ajax cordova login

我在Android上制作移动应用程序,我使用phonegap,mobile jquery ajax codeigniter和mysql。我的登录过程有问题。我的AJAX请求一直都失败了。我在注册过程中使用相同的东西,它的工作原理。它奇怪..这是我在phonegap上的login.html上的代码:

   <!DOCTYPE html> 
<html> 
    <head> 
    <title>Login</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
    <script type="text/javascript">

    $(document).ready(function(){

$("input[type=text]").val('');

document.addEventListener("deviceready", init, false);


function init() {

$('a[id^="submitButton"]').on('click',function(){
$("#submitButton",this).attr("disabled","disabled");
//$("#loginForm").on("submit",function() {


  u = $("#username").val();
  p = $("#password").val();


 if(u!='' && p!='') {



                 $.ajax({

                     url:'http://****.dyndns-home.com/health/index.php/health_login?username='+u+'&password='+p,

                     dataType:'json',
                     success:function(data, textStatus, jqXHR) 
                        {
                        $.mobile.changePage("menu1.html");

                         if(data.status==1) {
                         localStorage.setItem("username", u);
                         localStorage.setItem("password", p);

                         $.mobile.changePage("menu1.html");
                         $("input[type=text]").val('');


                         }
                          if(data.status==0){
                          alert("Wrong username or password!");
                          $("input[type=text]").val('');
                          }


                         },

                         error: function(jqXHR, textStatus, errorThrown){
                        alert('AJAX request failed');
                        }

                         });
}
else{
alert("You must enter a username and password");
}
 return false;




});
}
});
    </script>

</head> 



<body> 
<div data-role="page"> 

    <div data-role="header" >

    <h2>Login</h2></div> 
    <div data-role="content">
    <form id="loginForm">
    Username: <input type="text" id="username" value=""  name="username"/>
    Password:<input type="text" id="password" value=""   name="password"/>
    <a href="forget.html" > Ξέχασες τον κωδικό ή το όνομα χρήστη;</a><br>
    <a href="index.html" data-role="button" data-transition="turn" data-inline="true" data-icon="back" >Back</a>
    <a href="" id="submitButton" name="submitButton" data-role="button" data-inline="true" data-theme="b" data-icon="forward">Είσοδος</a>


    </form>
    </div> 
    <div data-role="footer" data-position="fixed"><h2></h2></div> 

</div> 
</body>
</html>

另外,当我在chrome和mozzila上运行我的login.html作为web应用程序时,我没有遇到任何问题,ajax请求成功!我用api level 15(android 4.0.3)在eclipse上运行这个应用程序。

告诉我你是否需要我的register.html代码。

你怎么想? 我现在想要解决这个问题2天,我什么也做不了。

谢谢!

1 个答案:

答案 0 :(得分:0)

打开模拟器的浏览器并键入Internet地址,以验证模拟器是否能够连接到Internet。否则,页面中的JS和CSS将无法加载。

如果模拟器能够在Internet中连接,您可以尝试以下代码。我已经对您的代码进行了一些改进。例如,jQuery框架在同一页面中多次加载。以下代码已在Android中进行过测试。

此外请注意您用于保存凭据的localStorage,存储没有到期日期的数据。您应该考虑使用sessionStorage而不是本地存储。 sessionStorage存储一个会话的数据。

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Login</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
        <script type="text/javascript">

            /**
             * Clears all the inputs in the page.
             */
            function clearPageInputs() {
                $("input[type=text]").val('');
            }


            /**
             * Trim function
             */
            String.prototype.trim = function() {
                a = this.replace(/^\s+/, '');
                return a.replace(/\s+$/, '');
            };

            /**
             * Submits the login form
             */
            function sumbitLoginForm(user, pass) {
                if (user.trim() == '' || pass.trim() == '')
                {   
                    // fill username and password in Greek language
                    alert("\u03a3\u03c5\u03bc\u03c0\u03bb\u03ae\u03c1\u03c9\u03c3\u03b5 \u03c4\u03bf Username \u03ba\u03b1\u03b9 \u03c4\u03bf Password!");
                }
                else
                {
                    $.ajax({
                        type: 'post',
                        url: 'http://.../.../...',
                        data: { username: user, password: pass },
                        dataType: 'json',
                        success: function(data) {
                            if(data && data.status == 1) {
                                // save in local storage
                                localStorage.setItem("username", user);
                                localStorage.setItem("password", pass);
                                // perform page transition 
                                $.mobile.changePage("menu1.html");
                            }
                            else {
                                clearPageInputs()
                                // wrong username / password in Greek language
                                alert("\u0388\u03c7\u03b5\u03b9\u03c2 \u03ba\u03ac\u03bd\u03b5\u03b9 \u03ba\u03ac\u03c0\u03bf\u03b9\u03bf \u03bb\u03ac\u03b8\u03bf\u03c2 \u03c3\u03c4\u03bf Username \u03ae/\u03ba\u03b1\u03b9 \u03c3\u03c4\u03bf Password.");
                            }   
                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            alert("Error: " + xhr.status + "\n" +
                                   "Message: " + xhr.statusText + "\n" +
                                   "Response: " + xhr.responseText + "\n" + thrownError);
                        }
                    });
                }

                return false;
            }

            $(document).ready( function() {
                clearPageInputs();

                $("#submitButton").click(function(){
                    sumbitLoginForm($("#username").val(), $("#password").val());
                });
            });
        </script>
    </head>
    <body> 
        <div data-role="page"> 
            <div data-role="header" >
            <h2>Login</h2></div> 
            <div data-role="content">
                <form id="loginForm">
                    <label for="username">Username:</label>
                    <input type="text" id="username" value=""  name="username"/>
                    <label for="password">Password:</label>
                    <input type="text" id="password" value=""   name="password"/>
                    <a href="forget.html">Ξέχασες τον κωδικό ή το όνομα χρήστη;</a><br>
                    <a href="index.html" data-role="button" data-transition="turn" data-inline="true" data-icon="back" >Back</a>
                    <a href="#" id="submitButton" data-role="button" data-inline="true" data-theme="b" data-icon="forward">Είσοδος</a>
                </form>
            </div> 
            <div data-role="footer" data-position="fixed"><h2></h2></div> 
        </div> 
    </body>
</html>