Question

搜索了将近2天，但无法找到合适的答案。

我正在开发一个Jquery Mobile页面。目前我有2个JQuery Mobile页面。页面启动时会显示一个按钮。点击该按钮将向服务器发送SOAP请求以获得响应。收到回复后，将显示第二页。

SOAP请求可能至少需要3到5秒。在那段时间里，我想在页面的中心显示一个加载器/微调器，直到我从服务器得到响应。怎么做？以下是我使用的代码。

包含2页的HTML文件

<form name="frm_login" action="" method="post">
  <div id='pg_login' data-role="page"> 
    <div data-role="content">
      <input type="submit" name="btn_login_submit" id="btn_login_submit" value="Login" />
    </div> 
  </div>

  <div id='pg_menu' data-role="page"> 
    <div data-role="header" data-position="fixed">
      <h1>Welcome</h1>
    </div> 
  </div>
</form>

Javascript代码如下

$(document).ready(function() {
  $('form').submit(function(e){
    e.preventDefault();
    var xmlRequest = getXmlRequest();
    loadingStart();
    $.soap({
      url: 'full wsdl url',
      method: 'getUserName',
      data: xmlRequest,
      success: function(xmlResponse) {
        loadingEnd();
        $.mobile.changePage('#pg_menu');
      },
      error: function(xmlResponse) {
      }
    });
    return false;
  });
});

function loadingStart(){
  $.mobile.loading( 'show', {
    text: "loading",
    textVisible: true
  });
}

function loadingEnd(){
  $.mobile.loading( "hide" );
}

我还在WSDL函数中保留了5秒的休眠时间以进行测试。

加载程序未显示。请告诉我这里出了什么问题。

此致梅莱

Answer 1

问题在于jQuery SOAP插件（http://plugins.jquery.com/soap/）

在我更改为原生AJAX之后，使用以下代码开始正常工作。

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

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

加载另一个页面时，JqueryMobile Loader / spinner

1 个答案: