// ajax > 현재 페이지에서 데이터 가져오기
$(document).ready(function(){
$('#qnaContent').on('click', function(){
$.ajax({
url:'/community/qna.html',
type:'GET',
success:function(data){
$('#content').html(data);
},
error:function(){
alert('실패');
}
});
});
});
$(document).ready(function(){
$('#loadContent').on('click', function(){
$.ajax({
url:'/community/review.html',
type:'GET',
success:function(data){
$('#content').html(data);
},
error:function(){
alert('실패');
}
});
});
});
$(document).ready(function(){
$('#writeContent').on('click', function(){
$.ajax({
url:'/community/write.html',
type:'GET',
success:function(data){
$('#content').html(data);
},
error:function(){
alert('실패');
}
});
});
});
$(document).ready(function(){
$('#writeContent').on('click', function(){
$.ajax({
url:'/community/write.html',
type:'GET',
success:function(data){
$('#content').html(data);
},
error:function(){
alert('실패');
}
});
});
});
이 코드는 jQuery를 사용하여 AJAX 요청을 통해 다른 HTML 페이지의 내용을 현재 페이지에 동적으로 로드하는 스크립트입니다
각 버튼 (#qnaContent, #loadContent, #writeContent) 클릭 시 AJAX 요청을 보내는 동일한 기능을
하나의 코드로 통합하여 효율적으로 작성했습니다
// ajax > 현재 페이지에서 데이터 가져오기
$(document).ready(function(){
function loadContent(id,url){
$(id).on('click', function(){
$.ajax({
url:url,
type:'GET',
success:function(data){
$('#content').html(data);
},
error: function(){
alert('실패');
}
});
}
)};
// Q&A,Review,Write loadContent 데이터 호출
loadContent('#qnaContent', '/community/qna.html');
loadContent('#loadContent', '/community/review.html');
loadContent('#writeContent', '/community/write.html');
});
loadContent 함수를 사용하여 버튼 ID와 URL을 인수로 받아, 각 버튼 클릭 시 해당 URL에서 데이터를 가져올 수 있도록
하나의 코드로 줄였다