使用Ajax填充div？

-1

我最近創建了一個菜單欄左側的網站。我的下一步是根據您在菜單中選擇的選項更新頁面右側的內容。我知道你可以使用iframe，但我想知道是否有替代它，就像更有活力的！使用Ajax填充div？

大多數的菜單選項都是輸入表單，我已經閱讀了關於填充div的ajax調用，但找不到關於如何實現它的好教程。

編輯：

這裏是一個草圖http://imageshack.us/photo/my-images/16/smlithis.png/

來源

2012-11-27 MizziPizzi

你嘗試過什麼嗎？你最好試着做一些事情，並用可以修改的代碼發佈問題。 –

你可以發佈圖片鏈接（你的網站的屏幕截圖？） – kernelpanic

您可以使用jQuery 這是你的菜單按鈕將如何看起來像：

<a href='#' onclick='return fillDiv(1)'>GoTo1</a> 
<script> 
function fillDiv(pageNum){ 
    $("#id_of_div_to_load_to").load("some_page.php",{ 'pahe_num': pageNum }); 
return false; 
} 
</script>

這只是許多方法可以做到這一個。

來源

2012-11-27 12:20:56 lvil

這看起來不錯，但是我必須爲每個不同的頁面編寫類似的代碼行嗎？我想加載到div中？對不起，如果我聽起來像一個noob，但我會永遠使用jQuery :) – MizziPizzi

「some_page.php」獲取變量pageNum，並可以確定要加載哪個頁面。下一個菜單按鈕可以是GoTo2 – lvil

@ user1789143：同樣檢查這個例子：http：//demo.tutorialzine.com/2009/09/simple-ajax-website-jquery/demo.html – lvil

阿賈克斯可以從服務器獲取數據，但它可以不填任何東西。 Ajax只是用於與服務器通信的JavaScript。 Javascript可以獲取這些數據並插入數據並創建元素來填充該div。

來源

2012-11-27 12:14:50 Rob

你的意思是這樣的： How to update div when on select change in jquery

如果你真的想從另一個來源，這將是整個另當別論動態獲取數據。

來源

2012-11-27 12:18:02 lleto

考慮使用JQuery。處理Ajax請求比使用普通的JS容易得多。文檔中的AJAX功能：http://api.jquery.com/jQuery.ajax/

使用成功回調（即在成功執行的功能），你可以在你的DIV填寫：

$.ajax({ 
    url: 'ajax/test.html', 
    success: function(data) { 
    $('.result').html(data); 
    alert('Load was performed.'); 
    } 
});

代替.result，選擇指向您的主DIV 。 .html（）函數用data填充您的div，這是從ajax請求返回的數據。

來源

2012-11-27 12:18:33 skndstry

使用Ajax填充div？

回答

相關問題