[KOSTA] Spring 기반 Cloud 서비스 개발자 양성 과정 44일차 - Ajax 실습
📃 step1 - .load()
$(function(){
$('#letter-a a').click(function(){
$('#dictionary').hide().load('a.html', function(){
$(this).fadeIn();
});
return false;
})
});
📃 step2 - getJSON()
$(function(){
$('#letter-b a').click(function(){
$.getJSON('b.json', function(data){ //callback함수의 파라미터 변수에는 서버의 결과값이 온다.
//결과값: [{},{}] -> 배열
$('#dictionary').empty();
$.each(data, function(index, item){
var html = '<div class="entry">';
html += '<h3 class="term">' + item.term + '</h3>';
html += '<div class="part">' + item.part + '</div>';
html += '<div class="definition">' + item.definition + '</div>';
html += '</div>';
$('#dictionary').append(html);
});
});
return false;
});
});
📃 step3 - getScript()
$(function(){
$('#letter-c a').click(function(){
$.getScript('c.js');
return false;
})
});
📃 step4 - xml => HTML 변환, .get()
$(function(){
$('#letter-d a').click(function(){
//xml => HTML변환
$.get('d.xml', function(data){
$(data).find('entry').each(function(index){
$entry = $(this);
var html = '<div class="entry">';
html += '<h3 class="term">' + $entry.attr('term') + '</h3>';
html += '<div class="part">' + $entry.attr('part') + '</div>';
html += '<div class="definition">' + $entry.find('definition').text() + '</div>';
html += '</div>';
$('#dictionary').append(html);
})
});
return false;
})
});
📃 step5 - $.ajax()
$(function(){
$('#letter-f form').submit(function(){
$.ajax({
url : 'server3.jsp',
type : 'post',
data : $(this).serialize(),
dataType : 'text',
success : function(data){
$('#dictionary').text(data);
}
})
return false;
});
});
Author And Source
이 문제에 관하여([KOSTA] Spring 기반 Cloud 서비스 개발자 양성 과정 44일차 - Ajax 실습), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@junbeomm-park/KOSTA-Spring-기반-Cloud-서비스-개발자-양성-과정-44일차-Ajax-실습저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)