Ajax Loader和链式选择框

我正在使用动态选择框，我使用JS / Jquery来更新每个选择框的值。 由于我从MySQL表中提取值，因此加载带有值的选择框有时需要更长的时间。 我搜索的一个解决方案是使用ajax加载器。

如何放置一个ajax加载器（就在updateSelectBox.js中的jQuery.getJSON之前），以便在第一个选项卡上加载时不能点击任何内容，并在成功处理后删除它（在同一个文件中）？ 还是更好的解决方案？ 这是一个例子

updateSelectBox.js

var formObject = { run : function(obj) { obj.nextAll('.update').attr({'disabled': true, 'hidden':true}).html('----'); var id = obj.attr('id'); var v = obj.val(); jQuery.getJSON('mod/postfile.php', { id : id, value : v }, function(data) { $('.update').removeClass('last'); if (!data.error) { obj.next('.update').html(data.list).removeAttr('disabled hidden'); } else { obj.addClass('last').nextAll('.update').attr({'disabled': true, 'hidden':true}).html('----'); } }); } }; $(function(){ $('.update').live('change', function() { var str = ""; $("select option:selected").each(function () { str += $(this).text() + " "; }); $("#postSelected").text(str); formObject.run($(this)); }); }); 

HTML

  Select one   <option value="">       ----   ----  

Answer 1

首先，您应该创建一个ajax加载程序映像（例如此处 ）并将其保存在您的服务器上。 就在getJSON之前，应该显示ajaxloader overlay（自定义图像源！）：

 $('#tabs').append('
'); $('#tabs .overlay').css("line-height", $('#tabs').height()+'px'); 

并在成功处理程序的末尾删除它：

 $('#tabs .overlay').remove(); 

你的formObject现在应该是：

 var formObject = { run : function(obj) { obj.nextAll('.update').attr({'disabled': true, 'hidden':true}).html('----'); var id = obj.attr('id'); var v = obj.val(); $('#tabs').append('
'); $('#tabs .overlay').css("line-height", $('#tabs').height()+'px'); jQuery.getJSON('mod/postfile.php', { id : id, value : v }, function(data) { $('.update').removeClass('last'); if (!data.error) { obj.next('.update').html(data.list).removeAttr('disabled hidden'); } else { obj.addClass('last').nextAll('.update').attr({'disabled': true, 'hidden':true}).html('----'); } $('#tabs .overlay').remove(); }); } }; 

需要使用其他样式表来查看叠加层：

 #tabs { position: relative; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; background-color: #EEEEEE; opacity: 0.5; } .overlay > div { position: relative; text-align: center; } .overlay > img { vertical-align: middle; } 

另见本例 。

Answer 2

您需要考虑的另一种方法是：您的MySQL查询不应该花费很长时间。 这些都是非常简单的查找; 如果他们花了很长时间，可能会丢失索引。 在添加预加载逻辑之前，我会看到查询在后端上花了多长时间，并尝试优化这些查询。