jquery Ajax：.load（）＆$ .ajax（）

这是我的jQuery代码来调用ajax一个开关的表示形式。它可以工作，但需要大约20秒才能加载，所以我想添加一个加载gif来等待（而XHR）。我不知道如何处理.load（）方法，我刚刚看到$ .ajax（）方法。如果有人能够解释我如何用我的方法显示gif，或者将我的代码翻译成$ .ajax（）方法。

$(document).ready(function() { 

     $('input:checkbox').change(function(){ 
     var nom = $(this).attr("value"); 
     if ($(this).is(':checked')) { 
      var target_url = "cgi-bin/switch.pl?param=" + $(this).attr('value'); 
      $('<div id="target_' + $(this).attr('value')+ '"></div>').load(target_url).appendTo($('#target')); 
     } 
     else { 
      $('div#target_' + $(this).attr('value')).remove(); 
     } 
    });

感谢，
再见。

来源

2011-05-02 eouti

你看起来没问题。问题是什么？ – 2011-05-02 07:44:28

使用$ .ajax（）方法翻译它，或在等待完成的事务时添加加载gif。 – eouti 2011-05-02 07:46:28

但是，您似乎已经添加了一个等待的gif：'.html（''）'，并且在加载内容时，它将覆盖以前的内容。 – 2011-05-02 07:50:25

你只要稍作改变了代码：

$('<div id="target_' + $(this).val() + '"></div>') 
    .html('<img src="ressources/loading.gif" />') 
    .load(target_url) 
    .appendTo('#target');

在你原来的代码（现在的编辑），要创建两个独立的申报单。

来源

2011-05-02 08:02:40

$获得（）是你想要的，只是$。阿贾克斯（）

$(document).ready(function() { 
    $('input:checkbox').change(function(){ 
    var nom = $(this).attr("value"); 
    if ($(this).is(':checked')) { 
     var target_url = "cgi-bin/switch.pl?param=" + $(this).attr('value'); 
     $.get(target_url, function(data){ 
     $('#target').html(data); 
     }); 
    } 
    else { 
     $('div#target_' + $(this).attr('value')).remove(); 
    } 
});

来源

2011-05-02 07:55:50 iain

$（'＃target'）可能不是正确的目标，这可能需要更改。 – iain 2011-05-02 07:56:49

一个简短的别名，您仍然可以做到这一点。在拨打电话之前，您只需要放置一个负载指示器，然后通过给您的方法一个回调（在我的示例中为hideLoadingIndicator）来隐藏负载指示器。

if ($(this).is(':checked')) { 
      var target_url = "cgi-bin/switch.pl?param=" + $(this).attr('value'); 

      //put your loading indicator code here 

      $('<div id="target_' + $(this).attr('value')+ '"></div>') 
       .load(target_url, {}, hideLoadingIndicator) 
       .appendTo($('#target')); //note callback 

      .. 
      .. 

function hideLoadingIndicator() { 
    //code to hide loading indicator 
}

来源

2011-05-02 07:55:56 JohnP

如果你想显示一个加载gif，当一个ajax请求不工作，为什么你不试试.ajaxStart（） - 处理程序？

比如你拿到的加载动画GIF的ID为“装载”一IMG：

<html> 
    <body> 
     <img src="images/loading.gif" id="loading"/> 
     <!-- some weird AJAX-Actions right here, etc. --> 
     <script type="text/javascript"> 
     $("#loading").ajaxStart(function(){ 
      $(this).show(); 
     }); 
     </script> 
    </body> 
</html>

每当一个Ajax的呼叫上升，动画，IMG将被显示。也许你把你的内容放在自己的div中，并将它隐藏在你的ajaxStart-Handler中，使它更直接，也许......

来源

2011-05-02 08:02:47 ryyppy

这里是优化的代码，应该首先显示加载gif，然后加载的内容：

$('input:checkbox').change(function(){ 
    var nom = $(this).attr("value"); 
    var id = "target_" + nom; 
    var oDiv = $(id); 
    if ($(this).is(':checked')) { 
     var target_url = "cgi-bin/switch.pl?param=" + nom; 
     if (oDiv.length == 0) { 
      $('#target').append('<div id="' + id + '"></div>'); 
      oDiv = $(id); 
     } 
     oDiv.html('<img src="ressources/loading.gif" />'); 
     oDiv.load(target_url); 
    } 
    else { 
     oDiv.remove(); 
    } 
});

请注意，您可以将该值存储一次到本地变量中（就像您已经做过的那样）并稍后使用该变量。

来源

2011-05-02 08:03:35

jquery Ajax：.load（）＆$ .ajax（）

回答

相关问题