Ajax - HTML
data Type이 Html인 파일과 통신하여
Ajax로 html파을일 불러와서 화면에 로드해보자.
var request = $.ajax({
url: "script.php", // 통신할url
method: "POST", // 통신할 메서드 타입
data: { id : '' }, //전송할 데이터
dataType: "html" //전송받은 데이터를 변환시킬 컨텐츠 타입
//DATA TYPE
//html(text/html), json(application/json), xml(text/xml), text(text/plain)
});
//정상적으로 통신이 완료되었을 때 실행되는 메소드. 인수값인 함수를 실행시킴(콜백함수)
request.done(function( data ) {
console.log(data);
});
//에러가 발생했을 때 실행되는 메서드
request.fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
});
Ajax - HTML 실습
▶ 실습1
ajax에 입력 데이터를 num 으로 설정하여 number타입 input 박스에서 정수의 값을 len으로 전달 받는다.
호출되는 html 파일에서는 이 len의 값 만큼 반복문을 돌려 html 테이블 코드를 내보낸다.
- 호출할 html
<script type="text/javascript" src="./resource/js/jquery-3.4.1.min.js"></script>
<input type="number" id="num" placeholder="출력갯수">
<button type="button" id="ajaxCall">호출</button>
<div id="ajaxResult">호출 버튼을 클릭해주세요</div>
<script type="text/javascript">
$(function(){
$('#ajaxCall').click(function(){
var num = $('#num').val()
var request = $.ajax({
url: "ajaxHtmlCall.jsp",
method: "POST",
data: { len : num },
dataType: "html"
});
request.done(function(data) {
console.log(data);
if(data != undefined && data != ''){
$('#ajaxResult').html(data);
}
});
request.fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
});
});
});
</script>
- 호출되는 ajaxHtmlCall.jsp
<%
//len 키 값으로 ajax02html에서 값 전송받기
String len = request.getParameter("len");
int num = 0;
//len 값이 null과 공백이 아니라면
if(len != null && !"".equals(len.trim())){
num = Integer.parseInt(len);
}
%>
<!DOCTYPE html>
<style>
td{border : 1px solid #000;}
</style>
<table>
<tbody>
<%
for(int i=0; i<num; i++){
%>
<tr>
<td>안녕하세요. <%=i %></td>
</tr>
<%
}
%>
</tbody>
</table>
'JavaScript&JQuery' 카테고리의 다른 글
| Checkbox (0) | 2020.04.08 |
|---|---|
| Ajax - json (0) | 2020.04.08 |
| Ajax (0) | 2020.04.08 |
| 객체 조작 메서드 활용 - 동적 바인딩 (0) | 2020.04.08 |
| 객체 조작 메서드 - 편집 메서드 (0) | 2020.04.08 |
