Jquery：Ajax：如何在开始之前显示加载对话框并在关闭之后关闭？

我想在AJAX请求正在进行时显示加载对话框; 我想在我的项目中的任何地方使用那段代码。

//--Add $("div.add_post a").click(function(){ var dlg = loadingDialog({modal : true, minHeight : 80, show : true}); $.ajax( { url : "/add.php", beforeSend : function (){ dlg.dialog("show"); }, complete : function (){ dlg.dialog("hide"); } } ); return false; }) //-- //--Loading dialog function loadingDialog(dOpts, text = "пожалуйста подождите, идет загрузка...") { var dlg = $("
 "+text+"
").dialog(dOpts); $(".ui-dialog-titlebar").hide(); return dialog; } //-- 

新代码

 //--Add $("div.add_post a").click(function(){ var dlg = loadingDialog(); $.ajax( { url : "/add.php", complete : function (){ dlg.dialog("hide"); }, success : function (data) { $(data).find("#add_post").dialog(); } } ); return false; }) //-- //--Loading dialog function loadingDialog(dOpts = {modal : true, minHeight : 80, show : true}, text = "пожалуйста подождите, идет загрузка...") { var dlg = $("
 "+text+"
").dialog(dOpts); $(".ui-dialog-titlebar").hide(); return dlg; } //-- 

返回 – 错误：没有这样的方法’隐藏’对话框小部件实例

最新新代码

 //--Add $("div.add_post a").click(function(){ var dlg; loadingDialog(); $.ajax( { url : "/add.php", complete : function (){ dlg.dialog("hide"); }, success : function (data) { var form = $(data).find("#add_post"); form.dialog({title : "Добавить признание", modal : true}); } } ); return false; }) //-- //--Loading dialog function loadingDialog(dOpts = {modal : true, minHeight : 80, show : true}, text = "пожалуйста подождите, идет загрузка...") { dlg = $("
 "+text+"
").dialog(dOpts); $(".ui-dialog-titlebar").hide(); } 

回 ：

TypeError：dlg未定义

dlg.dialog（ “隐藏”）;

Answer 1

由于$.ajax()是异步的，你不需要为’before send’使用特殊的函数…使用你的例子，只需在调用$.ajax()这样做：

 dlg.dialog("show"); $.ajax( { url: "/add.php", complete: function() { dlg.dialog("option", "hide"); } } ); 

（什么是异步IO？ http：//en.wikipedia.org/wiki/Asynchronous_I/O ）

注意！

在您的示例中，您在dlg创建并存储对话框，但随后返回dialog ，这是一个问题。 使用你的代码，它应该是这样的：

 function loadingDialog(dOpts, text = "пожалуйста подождите, идет загрузка...") { var dlg = $("
 "+text+"
").dialog(dOpts); $(".ui-dialog-titlebar").hide(); return dlg; } 

---

在你的’新代码’之后我添加了这个建议：

在全局命名空间中创建函数外部的对话框，如下所示：

 var dlg //de Put this OUTSIDE $("div.add_post a").click({}) function loadingDialog(dOpts, text = "пожалуйста подождите, идет загрузка...") { dlg = $("
 "+text+"
").dialog(dOpts); $(".ui-dialog-titlebar").hide(); } loadingDialog({modal : true, minHeight : 80, show : true}); 

然后什么都不返回，只需使用函数设置加载对话框，该函数修改函数命名空间之外的全局变量。

注意： http ： .dialog('option','hide')不是.dialog('hide')

Answer 2

我会尝试

 $("div.add_post a").click(function(){ var dlg = loadingDialog({modal : true, minHeight : 80, show : true}); dlg.dialog("show"); $.ajax({ url : "/add.php", complete : function (){ dlg.dialog("hide"); } }); return false; }); //--Loading dialog function loadingDialog(dOpts, text = "пожалуйста подождите, идет загрузка...") { var dlg = $("
 "+text+"
").dialog(dOpts); $(".ui-dialog-titlebar").hide(); return dialog; } 

Answer 3

工作）））

 $(".wrapper").prepend('
 идет загрузка
'); //--Add $("div.add_post a").click(function(){ $.ajax( { url : "/add.php", beforeSend : function () { loading(); }, complete : function (){ }, success : function (data) { loading("stop"); var form = $(data).find("#add_post"); form.dialog({title : "Добавить признание", modal : true}); } } ); return false; }) //-- //--Loading dialog function loading(type = "start") { if(type == "start") { $("#loading").dialog({modal : true, minHeight: 30}); $(".ui-dialog-titlebar").hide(); } else $(".ui-dialog-content").dialog().dialog("close"); } 

// –