Question

我有几个指向单个AJAX网址的链接。我可以将它加载到一个#DIV中，对于每个带有模式的请求：为每个链接加载和删除。现在我需要的只是一个网址，我试图避免删除并重新请求程序。

我有两种情况，仍然质疑并且非常需要建议来处理它们：

创建不同的容器#DIVS，以便在将此单个URL加载到每个DIV中时不会发生冲突，并继续定期隐藏和显示（不破坏/删除）。这意味着每个链接请求相同的URL并将相同的AJAX加载到每个容器#DIV中。非常消费，因为每个链接一次又一次地加载相同的AJAX。
只创建一个#DIV并将 MOVE AROUND 此#DIV转换为另一个.DIV（同样包含类，例如.ajax-container）。

所以我想要获得的是可重用且高效的代码。任何建议和例子将非常感谢。

更新，补充到目前为止已经完成的工作以澄清我的问题：

    $('a.browse')
             .click(function(){
                   var t = $(this);
                   t.show();
                   t.parent().prev().find('input.tex').addClass('focus');

                   // @TODO, avoid using remove(), and move this into another .hasPicker class instead to REUSE the same content
                   $('#imgPicker,#closebox').remove();

                   $('.picker-on').removeClass('picker-on');
                   t.parent().prev().find('input.tex').after('<div id="imgPicker"></div>').parent().addClass('picker-on');

                   // @TODO,  Check if #tabs has been loaded somewhere, and try to append it into current link that calls it
                   if ($('#tabs').length) {
                     t.parent().prev().find('#imgPicker').append('#tabs');
                   } else {
                     t.parent().prev().doAjax(); // load the same AJAX content
                   }
                   t.hide();

                   return false;
             });

$('input.tex').wrap('<div class="hasPicker"></div>');

这是doAjax（）的东西：

    $.fn.doAjax = function() {
  return this.each(function() {
        // Check for pending request & cancel it
        if (req) req.abort ();

        //showLoading();
        req = $.ajax ({
                url: "?ajax=1",
                method:'GET',
                cache: true,
                success: function (data) {
                        $('#imgPicker').html(data).show().after('<span id="closebox"></span>');
                        $('#closebox').show();
                        $("#tabs").tabs();
                        // reset request
                        req = null;
                },
                 error:function() {
                   alert('Fail to load image collection.');
                }
        });
   });
};

注意：#imgPicker是#tabs的动态容器。我曾经有一个ui.dialog，但看到大小然后我完成它只有一个简单的自定义弹出位置绝对对链接和形式请求它。 doAjax（）作为单个请求单独处理以加载相同的内容（#tabs）。 input.tex是一组文本字段表单（其中#tabs中的所有项目/选项都可以存储。）后跟其链接，通过相同的AJAX URL请求相同的AJAX内容。

希望我能说清楚。

由于

Answer 1

所以，我不确定我明白你要做什么，但让我们看看..

您是否尝试将SAME内容加载到多个容器中？或者每次通话都会改变结果？（我在考虑相同的内容，因为你说“非常消费”）

因为这是标记的jquery ..

您可能正在做类似的事情：

1.    $.ajaxSetup ({   
2.        cache: false  
3.    });   
4.    var ajax_load = "<img src='img/load.gif' alt='loading...' />";   
5.       
6.//  load() functions   
7.    var loadUrl = "ajax/load.php";   
8.    $("#load_button").click(function(){   
9.        $("#someDiv").html(ajax_load).load(loadUrl);   
10.    });

所以试试：

    $.ajaxSetup ({   
        cache: false  
    });   
    var ajax_load = "<img src='img/load.gif' alt='loading...' />";   

//  load() functions   
    var loadUrl = "ajax/load.php";   
    $("#load_button").click(function(){   
        $("#someDiv").html(ajax_load)
          .load(loadUrl, null, function(responseText){   
            $("#otherDiv").html(responseText);
         });   
    });

将结果应用于第二个元素。

如果您尝试仅在点击每个链接时显示相同的内容，那么最好不要这样做：

  var showOnClick = function(){
       var cacheResult = "";
       var ajax_load = "<img src='img/load.gif' alt='loading...' />";
       return function(){

         var divId = "";
         if(this.id === "button1") { divId = "#Div1"; } 
         else if (this.id === "button2") {divId = "#Div2";}

         if(!!cacheResult){
           $(divId).html(ajax_load).load(loadUrl, null, function(responseText){
              cacheResult = responseText;
           });       
         } else {
           $(divId).html(cacheResult);
         }         
       }; 
    }();

    $("#button1").click(showOnClick);
    $("#button2").click(showOnClick);

Answer 2

你可以尝试新发布的Jquery 1.4我不知道你想说什么但是我能看到的是你可以在jquery 1.4中使用 .detach（）函数。这会暂时删除DOM中的数据，您可以根据需要再次使用它。希望这会有所帮助。http://api.jquery.com/detach/

移动jquery ajax加载的内容是可重用的

2 个答案: