如何显示加载程序而不是错误页面加载jquerymobile

我正在开发混合移动应用程序通过使用英特尔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问题，工作正常，你能帮我

来源

2015-06-27 adr rizwan

你运行在服务器上或任何移动应用平台直接？如果没有，那么在服务器上像wampa那样运行它。为什么您使用的了window.location = ./homepage.html 而不是使用changePage方法

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

你得到的错误页面加载消息指JQM是无法加载页面，可能是由于穿越起源问题。尝试在服务器上运行它。或者可能是粘贴日志或创建一个蹲点。

来源

2015-06-27 09:06:17 Rahul

如何解决跨起源问题？ –

通过在浏览器中运行应用程序，首先在chrome控制台上发现错误。 – Rahul

如何显示加载程序而不是错误页面加载jquerymobile

回答

相关问题