使用AJAX填充使用jQuery頁面加載頁面

Question

我希望在這個問題上的任何幫助。

可以說我想爲頁面上不同的項目加載控件後，它已完成加載。

所以：

Object 1 
<div id="controls1" class="controls" item_id="1"></div> 

Object 2 
<div id="controls2" class="controls" item_id="2"></div> 

Object 3 
<div id="controls3" class="controls" item_id="3"></div> 

我怎麼能使用jQuery流行的DIV帶班「控制」使用AJAX調用？在這種情況下，我想它將不得不對每個DIV流行3次ajax調用。

我的AJAX搶內容是ajax.php？請求=控制& ITEM_ID =

謝謝！

Answer 1

一個基本的方式做到這一點如下：

$(document).ready(function() { 
    $('#controls1').load('ajax.php?request=controls&item_id=1'); 
    $('#controls2').load('ajax.php?request=controls&item_id=2'); 
    $('#controls3').load('ajax.php?request=controls&item_id=3'); 
}); 

一個更好的方法是動態地確定你有多少「控制」的div有，並將其加載需要...例如：

$(document).ready(function() { 
    $('.controls').each(function() { 
     var theId = $(this).attr('item_id'); 
     $(this).load('ajax.php?request=controls&item_id=' + theId); 
    }); 
}); 

祝你好運！

更新：

要避免使用自定義item_id屬性，你可以提取你從元素的ID所需的ID，使用正則表達式也許是這樣的...（警告，未測試）

$(document).ready(function() { 
    $('.controls').each(function() { 
     var theId = $(this).attr('id'); 
     theId = /controls(\d+)/.exec(theId)[1]; 
     $(this).load('ajax.php?request=controls&item_id=' + theId); 
    }); 
}); 

Answer 2

使用jQuery.load()。

這將填充目標div（任何元素，事實上）的DOM。但是如果你想給它們附加特殊的功能，你需要在加載完成後（在回調中）明確地做到這一點。

簡單的事件處理程序可以使用jQuery.live()（而不是USIG jQuery.bind()）

乾杯自動投注一組約束自己，以獲取新內容！

Answer 3

這將找到所有匹配的class =「controls」divs，提取item_id，然後前往服務器以獲取HTML。

更多關於這裏的AJAX負荷：http://docs.jquery.com/Ajax/load#urldatacallback

$(document).ready(function() { 
     $('.controls').each(function(i) { 
      var itemId = $(this).attr('item_id'); 
      $(this).load('ajax.php?request=controls&item_id=' + itemId) 
     }); 
    }); 

Answer 4

除了使重複調用$。負載（或其他），如果你想要做的是，在一個單 Ajax調用，這裏有兩種選擇：

1 - 包裝所有在另一個 一個這些div的，並已在服務器提供的 全部內容單個請求：

$(document).ready(function() { 
    $('#superDiv').load('foo.html'); 
}); 

2 - 發送JSON對象給客戶端包含ID /內容地圖

$(document).ready(function() { 
    $.get('foo.php', function(json) { 
     $('#controls1').html(json.controls1); 
     $('#controls2').html(json.controls2); 
     $('#controls3').html(json.controls3); 
    },"json"); 
});