2015-06-27 65 views
0

我正在開發混合移動應用程序通過使用英特爾xdk和jquerymobile的用戶界面。我有一個Ajax表單提交,這意味着我有兩個登錄,所以我使用標籤(2)。首先,我們將採取第一個標籤,我只需輸入用戶名,密碼,然後單擊按鈕它將檢查數據庫中的用戶名和密碼是否正確(在檢查過程中,我正在添加裝載程序),否則將重定向到下一個頁面它會顯示錯誤信息。一切工作正常如何顯示加載程序而不是錯誤頁面加載jquerymobile

這是我的HTML代碼

<div data-role="tabs" id="tabs"> 
      <div data-role="navbar"> 
       <ul> 
        <li><a href="#one" class="ui-btn-active" data-ajax="false">Pre-school</a></li> 
        <li><a href="#two" data-ajax="false">Daycare</a></li> 
       </ul> 
      </div> 
    <div id="one" class="ui-body-d ui-content"> 
     <div data-role="main" class="ui-content"> 
     <form name="loginform" method="post"> 
      <div id = "container"> 
      <div class="ui-field-contain"> 
        <label for="username">User name:</label> 
        <input type="text" name="usr" id="username"> 
        <label for="password">Password:</label> 
        <input type="password" name="pword" id="password"> 
      </div> 
      <div data-role="fieldcontain"> 
       <fieldset data-role="controlgroup"> 
       <input type="checkbox" name="checkbox-1" id="remember" class="custom" /> 
       <label for="remember">Remeber Me</label> 
       </fieldset> 
      </div> 
      <button id="submit" >Login</button> 
      </form>   

      </div> 
    </div> 
     </div> 

這是我的javascript代碼

$(document).ajaxStart(function() {   
     $.mobile.loading('show',{ 
       text: 'Loading...', 
       textVisible: true, 
       theme: 'a', 
       html: "" 
     }); 
    }); 

    $(document).ajaxStop(function() { 
     $.mobile.loading('hide'); 
    }); 

$(document).ready(function() { 
    var u = window.localStorage["username"]; 
    var p= window.localStorage["password"]; 

    $('#username').val(u); 
    $('#password').val(p); 

     $('#submit').click(function(){ 

       un = document.loginform.usr.value; 
       pw = document.loginform.pword.value; 

        $.ajax({ 
         type :'GET', 
         url :'http://example.com/login.php', 
         data : {username : un, password : pw}, 
         beforeSend : function() {$.mobile.loading('show')}, 
         complete : function() {$.mobile.loading('hide')}, 
         success: function (data) { 
         sessionStorage.setItem('uname', un); 
         if ($('#remember').is(':checked')) { 
          var username = un; 
          var password = pw; 
          window.localStorage["username"]=username; 
          window.localStorage["password"]=password;    
         } 
         status = JSON.stringify(data); 
         var re = /[ ,]*"([^"]+)"|([^,]+)/g; 
         var match; 
         while (match = re.exec(status)) { 
          var text = match[1] || match[2]; 
          $('ol').append($('<li>').text(text)); 
          } 
          if(text === "1"){ 
           window.location = "./homepage.html"; 
          } 
          else if(text === "0"){  
           intel.xdk.notification.alert("Invalid username and password", "Error", "Ok"); 
          } 
          else{ 
           intel.xdk.notification.alert(text, "Error", "Ok");  

          } 
         } 

        }); 

       }); 
     }); 

我的問題: - 發送請求到服務器,並得到迴應一切工作正常,但我的問題是當我點擊登錄按鈕它顯示錯誤頁面加載,而不是我的裝載機

我的要求: - 當我點擊登錄按鈕,它應該顯示加載器,而不是錯誤頁面加載。我實現了裝載機,但它仍然是顯示「錯誤頁面加載」我認爲這是一些用戶界面的問題,因爲我的Ajax代碼是除了這個UI問題,工作正常,你能幫我

回答

0

你運行在服務器上或任何移動應用平臺直接? 如果沒有,那麼在服務器上像wampa那樣運行它。 爲什麼您使用的了window.location = ./homepage.html 而不是使用changePage方法

$.mobile.changePage("./homepage.html") 

你得到的錯誤頁面加載消息指JQM是無法加載頁面,可能是由於穿越起源問題。嘗試在服務器上運行它。 或者可能是粘貼日誌或創建一個蹲點。

+0

如何解決跨起源問題? –

+0

通過在瀏覽器中運行應用程序,首先在chrome控制檯上發現錯誤。 – Rahul