[AJAX] FETCH 함수 - ajax.js 이용, jquery ajax 파라미터 전송

📌 test3.jsp 생성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- /ajax1/src/main/webapp/20221020/test3.jsp 

        0 ~ 99 사이의 임의의 값을 10개 생성하여 //Math.floor(Math.random()*100)
        , 를 이용하여 문자열 변환하여 전달 //split(",")
        
--%>    
<%
   String result = "";
for(int i=1;i<=10;i++) {
	int n = (int)(Math.random()*100);
	result += n + ((i==10)?"":",");
}
//out.ptintln(result);
%>
<%=result %>

📌 ajax3.html

<!DOCTYPE html>
<!-- /ajax1/src/main/webapp/20221020/ajax3.html -->
<html>
<head>
<meta charset="UTF-8">
<title>ajax.js 이용</title>
<script type="text/javascript" src='../js/ajax.js'></script>
<script>
   //window.onload : 페이지 준비 완료되면
   window.onload = function() {
// ajax("test3.txt",null,getMax,'GET') //요청
   ajax("test3.jsp",null,getMax,'GET') 
   //test3.jsp : 0 ~ 99 사이의 임의의 값을 10개 생성하여 
   //             , 를 이용하여 문자열 변환하여 전달
   
   }
   function getMax() { //콜백함수
	   if(this.readyState ==4 && this.status == 200) {
		   console.log(this.responseText)
		   //nums : 배열 값(배열 데이터). 문자열형 배열
		   const nums = this.responseText.split(",")
		   //실수형 <= parseFloat(문자열)
		   let max = parseFloat(nums[0])
		   for(let i=1; i<nums.length; i++) {
			   nums[i] = parseFloat(nums[i])
			   if(max < nums[i]) max = nums[i]
		   }
		   alert(max)
		   document.querySelector("#result").innerHTML = "<Strong>" + max + "</strong>"
	   }
   }
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>

fetch3.html 생성

<!DOCTYPE html>
<!-- /ajax1/src/main/webapp/20221020/fetch3.html -->
<html>
<head>
<meta charset="UTF-8">
<title>fetch3 예제</title>
<script type="text/javascript" src='../js/ajax.js'></script>
<script>
window.onload = function() {
	fetch("test3.jsp")
	.then((r) => r.text()) //람다 방식. r : 매개변수
	.then((data) => {
		console.log(data)
		const nums = data.split(",")
		let max = parseFloat(nums[0])
		   for(let i=1; i<nums.length; i++) {
			   nums[i] = parseFloat(nums[i])
			   if(max < nums[i]) max = nums[i]
		   }
		 alert(max)
		   document.querySelector("#result").innerHTML = "<Strong>" + max + "</strong>"
	})
}
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>

jquery ajax 파라미터 전송

📌 jqueryajax2.html

<!DOCTYPE html>
<!-- /ajax1/src/main/webapp/20221020/jqueryajax2.html -->
<html>
<head>
<meta charset="UTF-8">
<title>jquery ajax 파라미터 전송</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(function() {
	  $("#btn1").click(function() {
		  const param = $("form[name=ajaxForm]").serialize()
		  console.log(param)
		  $.ajax({
			  url : "jqueryajax2.jsp",
			  type : "POST",
			  data : param,
			  success : function(data) {
				  $("body").append(data)
			  },
			  error : function(e) {
				  alert("서버오류:" + e.status);
			  }
		  })
	  })
  })
</script>
</head>
<body>
<button id="btn1">jqueryajax2.jsp</button>
<button id="rmbtn1">jqueryajax2.jsp의 추가내용 제거</button>
<form name="ajaxForm" method="post">
<input type="text" name="name">
<input type="text" name="city">
</form>
</body>
</html>

📌 jqueryajax2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- /ajax1/src/main/webapp/20221020/jqueryajax2.jsp --%>    
<h2>안녕하세요. ${param.name}입니다. 
<br>${param.city}에 살고 있습니다.
</h2>

📌 jqueryajax2.html 내용 추가

<!DOCTYPE html>
<!-- /ajax1/src/main/webapp/20221020/jqueryajax2.html -->
<html>
<head>
<meta charset="UTF-8">
<title>jquery ajax 파라미터 전송</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(function() {
	  $("#btn1").click(function() {
		  /*
		   serialize() : form에 속한 모든 파라미터들을 전송 할 수 있도록 
		                 파라미터 형태의 문자열로 생성	  
		   $("input[name=name]") : name 속성의 값이 name인 input 태그.
	       $("input[name=city]") : name 속성의 값이 city인 input 태그.
	       val() : value 속성값 리턴
	       val(값) : value 값에 저장
	       html() : innerHTML의 값 리턴
	       html(값) : innerHTML 값에 저장
		  */
//		  const param = $("form[name=ajaxForm]").serialize()
		  const param = "name=" + $("input[name=name]").val() + "&city=" + $("input[name=city]").val()
		  console.log(param)
		  $.ajax({
			  url : "jqueryajax2.jsp",
			  type : "POST",
			  data : param,
			  success : function(data) {
				  $("body").append(data)
			  },
			  error : function(e) {
				  alert("서버오류:" + e.status);
			  }
		  })
	  })
//rmbtn 버튼 클릭시 내용 제거 하는 프로그램 구현하기
	  	$("#rmbtn1").click(function() {
		    $("h2:last").remove() //h2 태그 중 마지막 태그 삭제
		   })
  })
</script>
</head>
<body>
<button id="btn1">jqueryajax2.jsp</button>
<button id="rmbtn1">jqueryajax2.jsp의 추가내용 제거</button>
<form name="ajaxForm" method="post">
<input type="text" name="name">
<input type="text" name="city">
</form>
</body>
</html>

저작자표시 비영리 변경금지 (새창열림)

'수업(국비지원) > Ajax' 카테고리의 다른 글

[AJAX] ajax - jquery 이용한 시,군,구 선택 (0)	2023.04.21
[AJAX] jquery를 이용한 ajax 연습 (0)	2023.04.21
[AJAX] FETCH 함수 - JSON (0)	2023.04.21
[AJAX] FETCH 함수, FETCH 함수 - get 방식, post 방식 (0)	2023.04.21
[AJAX] XMLHttpRequest 객체 (0)	2023.04.21