[KOSTA]Springベースのクラウドサービス開発者研修コース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;
})
});
📃 手順4-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;
});
});
Reference
この問題について([KOSTA]Springベースのクラウドサービス開発者研修コース44日目-Ajax練習), 我々は、より多くの情報をここで見つけました https://velog.io/@junbeomm-park/KOSTA-Spring-기반-Cloud-서비스-개발자-양성-과정-44일차-Ajax-실습テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol