在 Webservice ajax 调用中的 Modal Popup Extender 中显示加载图像

Question

我使用 .ajax 调用 web 服务方法，将电子邮件发送到输入的电子邮件。

我想展示一个 ajax 模态弹出扩展器，其中包含一个图像，上面写着“sendig...”

我使用 .ajax 来调用我的网络服务，例如：

var SendingModal = $find('SendMPE');
    var Resend = -1;
    $.ajax({
             async: false,
             type: "POST",
             url: "FinKaynWebService.asmx/SendEmail",
             data: "{'Email': '" + Email + "'}",
             contentType: "application/json; charset=utf-8",
             dataType: "json",
             beforeSend: function() {
                 $("#SendMPE").show();
             },
             success: function(response) {
                 Resend = response.d;
                 SendingModal.hide();
              },
              failure: function(msg) {
                 alert('Sending Email failed,try later');
              }
    });

问题是我的 SendMPE 没有显示。

<div id="SendingDiv" style="display:none;background-color:Yellow;color:Blue;">
     <img id="LoadingImage" alt="Still sending"  src="./Images/Sending.gif" />
    <span style="margin-left:10px;">Sending...</span>
    <asp:Button ID="CloseButton" runat="server" style="display:none;" />
</div>
<asp:ModalPopupExtender ID="SendMPE" X="200" Y="200" runat="server" 
                    TargetControlID="SendHiddenButton" PopupControlID="SendingDiv" 
           CancelControlID="CloseButton"></asp:ModalPopupExtender>

这个问题是图片引起的还是什么原因？

谁有想法或已经做过类似的事情：在弹出窗口中加载图像。

Answer 1

首先你应该使用

data: '{"Email": "' + Email + '"}'

或更好

data: JSON.stringify({Email: Email})

而不是

data: "{'Email': '" + Email + "'}"

详情请参阅this answer。

再说一句。事件beforeSend(jqXHR, settings) 应该用于在发送之前修改jqXHR（在jQuery 1.4.x 中，XMLHTTPRequest）对象（参见jQuery.ajax 文档）。在您的情况下，您可以在 $.ajax 调用之前放置 $("#SendMPE").show();。

此外，您可能想使用$("#SendingDiv").show();？

Answer 2

也许您应该删除 'style="display:none;'来自 SendingDiv。ModalPopupExtender 将在启动时隐藏此 div。

Answer 3

这可能与您的想法不完全一致，但我通常遵循以下一般模式。我将请求作为通用函数（对您的目的而言并不重要），但有回调方法处理进程/错误，处理程序本身被实例化负责显示模式。

AJAX 调用：

var data = $.toJSON("{'obj:' + obj + "}");
var URI = "/FinKaynWebService.asmx/SendEmail";
var MSG = $("#modalDiv")
ajaxRequest(data, URI, new genericHandler(msg));

AJAX 函数：

function ajaxRequest(requestData, serviceURI, handler) {

  $.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: serviceURI,
    data: requestData,
    dataType: "json",
    cache: false,
    success: function(result) {
      callbackFunction.Process(result);
    },
    error: function(msg) {
      callbackFunction.OnError(msg.responseText)
    }
  });

}

处理程序：

function genericHandler(msg) {
  $.blockUI(msg)
  this.Process = function(d) { alert("Data updated sucessfully.") };
  this.OnError = function(d) { alert(d.toString()) };
}