728x90
1. 호출 버튼을 눌렀을때 연결된 주소(ajaxHtmlCall.jsp)의 내용이 가져와지는 확인하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax - html </title>
<script type="text/javascript" src ="./resource/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('#ajaxCall').click(function(){
var request = $.ajax({
url: "ajaxHtmlCall.jsp", //통신할 url
method: "POST", //통신할 메서드 타입
//data: { id : '' }, //전송할 데이터
dataType: "html" //전송받은 데이터를 변환시킬 컨텐츠 타입
});
//정산적으로 통신이 완료되었을때 실행되는 메서드, 인수값인 함수를 실행시켜준다(콜백함수)
request.done(function( data ) {
console.log(data)
if(data != undefined && data !=''){
}
});
//에러가 발생했을때 실행되는 메서드
request.fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
});
});
});
</script>
</head>
<body>
<button type = "button"id="ajaxCall">호출</button>
<div id="ajaxResult"> 호출 버튼을 클릭해주세요. </div>
</body>
</html>
2. html 내용 채우기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<style>
td{border:1px solid #000;}
</style>
<table>
<tbody>
<%
for(int i=0; i<10;i++){
%>
<tr>
<td> 안녕하세요.<%=i %> </td>
</tr>
<%
}
%>
</tbody>
</table>
3. 가져온 데이터를 화면에 뿌리기
명령어 추가 - 어제 배웠쬬 html 추가하는 메서드 $('선택자').html( );
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax - html </title>
<script type="text/javascript" src ="./resource/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('#ajaxCall').click(function(){
var request = $.ajax({
url: "ajaxHtmlCall.jsp", //통신할 url
method: "POST", //통신할 메서드 타입
//data: { id : '' }, //전송할 데이터
dataType: "html" //전송받은 데이터를 변환시킬 컨텐츠 타입
});
//정산적으로 통신이 완료되었을때 실행되는 메서드, 인수값인 함수를 실행시켜준다(콜백함수)
request.done(function( data ) {
console.log(data)
if(data != undefined && data !=''){
$('#ajaxResult').html(data); //html text로 가져오서 html로 추가해서 화면에 뿌려주기
}
});
//에러가 발생했을때 실행되는 메서드
request.fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
});
});
});
</script>
</head>
<body>
<button type = "button"id="ajaxCall">호출</button>
<div id="ajaxResult"> 호출 버튼을 클릭해주세요. </div>
</body>
</html>
4. 이제 데이터를 전송해봅시다.
주석 처리한 data :{ id : ' ' } 부분에 키와 값을 넣어 봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax - html </title>
<script type="text/javascript" src ="./resource/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('#ajaxCall').click(function(){
var num = $('#num').val();
var request = $.ajax({
url: "ajaxHtmlCall.jsp", //통신할 url
method: "POST", //통신할 메서드 타입
data: { len : num }, //전송할 데이터
dataType: "html" //전송받은 데이터를 변환시킬 컨텐츠 타입
});
//정산적으로 통신이 완료되었을때 실행되는 메서드, 인수값인 함수를 실행시켜준다(콜백함수)
request.done(function( data ) {
console.log(data)
if(data != undefined && data !=''){
$('#ajaxResult').html(data); //html text로 가져오서 html로 추가해서 화면에 뿌려주기
}
});
//에러가 발생했을때 실행되는 메서드
request.fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
});
});
});
</script>
</head>
<body>
<input type="number" id="num" placeholder="출력갯수">
<button type = "button"id="ajaxCall">호출</button>
<div id="ajaxResult"> 호출 버튼을 클릭해주세요. </div>
</body>
</html>입력값을 받아야해서 input 박스 하나 더 만들어서 id를 num으로 하고
data: { len : num } 키를 len으로 값을 num으로 설정
5. 데이터를 보냈으니까 받아야겠죠!
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//len 키값으로 ajax02.html에서 값 전송하여 받기
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>request.getParameter( ) 로 보내진 데이터를 예쁘게 받아와서 변수에 담아주기.
근데 받아온 데이터가 문자열이죠? 저는 숫자가 필요한데....ㅋㅋ
그래서 Integer.parseInt로 숫자로 형변형 하기 그러고 나서 반복문의 조건에 받아온 인수값 넣어주기!
반응형
'[YERIEL] 개발일기 > .etc' 카테고리의 다른 글
| jQurey - Ajax (0) | 2020.03.31 |
|---|---|
| jQuery - json Ajax (0) | 2020.03.31 |
| 객체 편집 메서드 실습 (0) | 2020.03.31 |
| 동적 바인딩 & 트리거 & 이벤트 제거 (0) | 2020.03.30 |
| 수치 조작 메서드 & 객체 편집 메서드 (0) | 2020.03.30 |
댓글