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

Question

我正在使用 intel xdk 和 jquerymobile 作为 UI 开发混合移动应用程序。我有一个 ajax 表单提交，这意味着我有两个登录名，因此我正在使用 tabs(2)。首先，我们将使用第一个选项卡，我只需输入用户名、密码并单击按钮，它将检查数据库中的用户名和密码是否正确（在检查过程中我正在添加加载程序）如果正确，它将重定向到下一页，否则它会显示错误信息。一切正常

这是我的 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");    

                            }
                        }

                    });

                });
         });

我的问题：- 向服务器发送请求并获得响应一切正常，但我的问题是当我单击登录按钮时，它显示 Error page Loading 而不是我的加载器

我的要求：- 当我单击登录按钮时，它应该显示 loader 而不是 Error page Loading 。我实现了加载器，但它仍然显示“错误页面加载”我认为这是一些 UI 问题，因为我的 ajax 代码工作正常，除了这个 UI 问题你能帮我吗

Answer 1

您是在服务器上还是直接在任何移动平台上运行应用程序？ 如果没有，则在 wampa 等服务器上运行它。 你为什么要使用 window.location = ./homepage.html 而不是使用changePage方法

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

您收到错误页面加载消息意味着 JQM 无法加载页面可能是由于跨源问题。尝试在服务器上运行它。 或者可以是粘贴日志或创建一个 plunker。