[jQuery] jQuery ajax사용방법

ajax 사용방법

 

html 읽기

$('#bt').click(function(){//ajax 버튼 클릭
	$.ajax({
		//--응답페이지 요청이 필수
		url: 'getData3.jsp'//요청
		, success: function(result){
			$('div').html(result);
		}// 성공시 콜백
		//-- 데이터 전달 키, 벨류
		, data: {
			name: $('[name=username]').val()
			, age: $('[name=age]').val()
		}
		, type:'POST' //HTTP요청방식
		, dateType: 'html'//응답데이터 형식(text, html, xml, json)
		, error: function(xhr,status){//에러콜백
			alert('서버에러!');
			alert('상태: '+xhr.status+',상태 text: '+xhr.statusText+'\nstatus: '+status);
		}
	});
	
});

 

xml읽기

$.ajax({
	url: 'response4.jsp'//요청
	, success: function(doc){
		
		var ol = $('<ol>');	
   	      $(doc).find('title').each(function(idx,titleEle){
   	    	 //alert($(this).text());//AjaxProgramming
   	    	 var li = $('<li>').text($(this).text());
   	    	 //<li>AjaxProgramming</li>
   	    	 ol.append(li);//<ol><li>AjaxProgramming</li></ol>
   	      });
			
	$('#d1').html(ol);
	}// 성공시 콜백
	, type:'GET' //HTTP요청방식
	, dateType: 'xml'//응답데이터 형식(text, html, xml, json)
});

 

json읽기

$.ajax({
	url: 'response5.jsp'//요청
	, success: function(result){
		var str= JSON.parse(result);
		for (var i = 0; i < str.person.length; i++) {
						
			 var htmlTxt = '<br>이름:'+ str.person[i].name
                +'<br>나이:'+ str.person[i].age
               +'<br>직업:'+ str.person[i].job+'<hr color=red>';
                $('#d1').html($('#d1').html()+htmlTxt);
			}
	}// 성공시 콜백
	, type:'GET' //HTTP요청방식
	, dateType: 'html'//응답데이터 형식(text, html, xml, json)
	, error: function(xhr,status){//에러콜백
	alert('서버에러!');
	alert('상태: '+xhr.status+',상태 text: '+xhr.statusText+'\nstatus: '+status);
	}
});