2012-03-20 112 views
6

有人能幫忙嗎?jQuery/AJAX - 點擊按鈕時將內容加載到div中?

我想填補一個例如

<div id="contenthere"></div> 

帶有來自外部文件的內容例如,

/includes/about-info.html 

當點擊某個類的按鈕時,例如,

<p class="classloader">Click Here</p> 

有沒有人有一個快速的代碼示例,他們可以告訴我實現這個目標?

+0

http://api.jquery.com/load / – Blazemonger 2012-03-20 13:17:37

回答

13

使用jQuery.clickjQuery.load

$(document).ready(function(){ 
    $('.classloader.').click(function(){ 
     $('#contenthere').load('/includes/about-info.html'); 
    }); 
}) 
2

你可以訂閱.click()事件的段落,然後使用.load()函數來發送一個AJAX請求給定的url和注入結果與指定選擇:

$(function() { 
    $('.classloader').click(function() { 
     $('#contenthere').load('/includes/about-info.html'); 
     return false; 
    }); 
}); 
0

嘗試以下操作:

var myurl = 'myfileonthesamedomain.html'; 

$('button').click(function(){ 
    $('div.loadme').load(myurl); 
}); 
2

加載最新版本的jQuery:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 

jQuery代碼:

<script language="javascript"> 
$(function(){ 
    $(".classloader").click(function(){ 
    $("#contenthere").load("/includes/about-info.html"); 
    }); 
}); 
</script> 
</script> 

HTML代碼:

<p class="classloader">Click Here</p> 
<div id="contenthere"></div>