使用Phonegap-AJAX登錄移動應用程序

我正在android上製作移動應用程序，並使用phonegap，移動jquery ajax codeigniter和mysql。我在登錄過程中遇到問題。我的AJAX請求一直失敗。我在註冊過程中使用相同的東西，它可以工作。它奇怪的。這是我的代碼上的login.html上的PhoneGap：使用Phonegap-AJAX登錄移動應用程序

<!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>

此外，當我對鉻和mozzila運行我的login.html作爲一個Web應用程序我沒有問題，Ajax請求的成功！我使用api level 15（android 4.0.3）在eclipse上運行這個應用程序。

告訴我，如果你需要我的register.html代碼。

你覺得怎麼樣？我正在尋找解決這個問題現在2天，我什麼都做不了。

謝謝！

來源

2012-08-31 user1637624

你沒有說它是如何工作的。點擊事件沒有被觸發？ Ajax電話沒有出去？ –

問題在於ajax請求。 Ajax調用失敗，它顯示錯誤消息。正如我之前所說，我在我的register.html頁面使用相同的ajax請求與不同的url和數據，它的工作正常！另外當我運行我的網站login.html（鉻，mozzila）它的作品。所以我的php-mysql是正確的。 – user1637624

打開仿真器的瀏覽器並輸入Internet地址，以驗證仿真器是否能夠連接到Internet。否則，頁面中的JS和CSS將無法加載。

如果仿真器能夠在互聯網上連接，您可以嘗試下面的代碼。我在你的代碼中進行了一些改進。例如，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>

來源

2012-09-01 18:28:02

首先我想感謝你的回覆。我解決了我的代碼問題，因爲我將數據類型從json更改爲了文本。我試過你的代碼，但是當我有數據類型的json時，我的請求失敗。我不明白爲什麼。在我的服務器端，我得到了json編碼，它可以成功運行。你知道爲什麼json有問題嗎？ – user1637624

我的錯誤信息是：錯誤：200 消息：確定響應：{「data」：[{「\ u038c \ u03bd \ u03bf \ u03bc \ u03b1 ..............」：「sd」，「\ u0395 \ status」：1，「message」：「Success！」} SyntaxError：invalid label – user1637624

「\ u0395 \ status」爲無效標籤。您將不得不更改標籤名稱。您可以在http://jsonlint.com/ validator上查看有效性。這是一個有效的迴應：{「data」：[{「\ u038c \ u03bd \ u03bf \ u03bc \ u03b1 ..............」：「sd」，「status」：1，「消息」：「成功！」 }]}。總之，當前的JSON響應是無效的，這是問題的原因。 –

使用Phonegap-AJAX登錄移動應用程序

回答

相關問題