Question

我正在使用intel xdk和jquerymobile为UI开发混合移动应用程序。我有一个ajax表单提交，这意味着我有两个登录，所以我使用选项卡（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");    

                            }
                        }

                    });

                });
         });

我的问题： - 向服务器发送请求并获得响应一切正常但我的问题是当我单击登录按钮时显示错误页面加载而不是我的加载程序

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

Answer 1

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

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

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

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

1 个答案: