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

我使用.ajax来调用webservice方法，该方法向输入的电子邮件发送电子邮件。

我想展示一个ajax模态弹出扩展器，其中包含一个图片，上面写着’sendig …’

我使用.ajax来调用我的webservice：

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没有显示。

 
  Sending...  
  

这是由图像引起的这个问题还是什么？

谁有想法或已经做过像这样的somthin：在popoup中加载图片。

Answer 1

首先你应该使用

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

或更好

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

代替

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

请参阅此答案了解详情。

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

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

Answer 2

也许你应该删除’style =“display：none;’ 来自SendingDiv.ModalPopupExtender将在启动时隐藏此div。

Answer 3

这可能不是您的想法，但我通常遵循以下一般模式。 我有一个generics函数的请求（对你的目的不重要），但有回调方法处理进程/错误，处理程序本身被实例化负责显示模态。

AJAX电话：

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

AJAXfunction：

 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()) }; }