cors

2024. 1. 15. 21:13ㆍDaily Codig Reminder

sample01_text2_POST

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
 $(function(){
	 $("button").on("click",getData);
	  })
function getData(){
	$.ajax(
		{
			type:"post",
			url:"sample01_text2.jsp",
			data: {
				v1: $("#v1").val(),
				v2: $("#v2").val(),
			},
			dataType:"text",
			success : function(data,status, xhr){
				$("result").text(data);
			},
			error: function(xhr, status, error){
				$("#result").append(error);
				$("#result").append(status);
			}

		}
	)
}	  
</script>
<title>Insert title here</title>
</head>
<body>
<button id="a">ajax요청</button><br>
 v1:<input type="text"  id="v1"><br>
 v2:<input type="text"  id="v2"><br>
 <div id="result"></div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
   String v1= request.getParameter("v1");
	String v2= request.getParameter("v2");
	System.out.println( v1+ "\t"+ v2);
%>
<%= v1 + v2+ "전송완료" %>

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
 $(function(){
$("#a").on("click", getData);
$("#b").on("click", getData2);
});
function getData (){
	$.ajax(
		{
			type:"get",
			url:"sample02_json.jsp",
			dataType:"json",
			success: function(data, status, xhr){
				var username = data.username;
				var age = data.age;
				console.log(username, age);
				$("#result").text(username+":"+age);

			},
			error: function(xhr, status, error){
				
				$("#result").text(error);
			}
		});
	
}
function getData2 (){
	$.ajax(
		{
			type:"get",
			url:"sample02_json.jsp",
			dataType:"text",
			success: function(data, status, xhr){
			//	var jsondata = JSON.parse(data);
				var jsondata = $.parseJSON(data);
				var username = jsondata.username;
				var age = jsondata.age;
				console.log(username, age);
				$("#result").text(username+":"+age);

			},
			error: function(xhr, status, error){
				
				$("#result").text(error);
			}
		});
	
}
</script>
<title>Insert title here</title>
</head>
<body>
<button id="a">ajax요청 json</button>
 <button id="b">ajax요청 text</button>
 <div id="result"></div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% String name="홍길동";
	int age=20;
%>
{
"username": "<%= name %>", 
"age": "<%= age %>"  
}

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
 $(function(){
$("#a").on("click", getData);

});
function getData (){
	$.ajax(
		{
			type:"get",
			url:"sample02_json2.jsp",
			dataType:"json",
			success: function(data, status, xhr){
				$.each(data,function(idx, ele){
			$("#result").append(ele.username+":"+ele.age+"<br>"); //this 가 ele 와 같아서 쓸수 없ㅁ
		});
		//일반 for 문

			},
			error: function(xhr, status, error){
				
				$("#result").text(error);
			}
		});
	
}

</script>
<title>Insert title here</title>
</head>
<body>
<button id="a">ajax요청 json</button>

 <div id="result"></div>
</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% 
//json을 배열로 전송
//[{},{}]
String name="홍길동";
int age=20;
%>
[
{"username": "<%= name %>", "age": "<%=age %>"},
{"username": "이순신", "age": "10"},
{"username": "강감찬", "age": "20"}
]

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
 $(function(){
$("#a").on("click", getData);

});
function getData (){
	$.ajax(
		
		{
		type: "get",
		url:"sample02_json3_1.jsp",
		dataType :"json",
		data: {//서버에 전달할 데이터
				v1: $("#v1").val(), //data전송{va:'홍길동',v2:'10'}
				v2: $("#v2").val()
				
				},
		success : function (data, status, xhr){
			$.each(data, function(idx,ele){
				$("#result").append(ele.username+":"+ele.age+"<br>");
			});
		} ,
		error: function(xhr, status, error){
			$("#result").append(error);
			$("#result").append(error);
		}
	});
}


</script>
<title>Insert title here</title>
</head>
<body>
<button id="a">ajax요청 json</button><br>
v1 : <input type="text" id="v1"> <br>
v2 : <input type="text" id="v2"> <br>
 <div id="result"></div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% 
String name=request.getParameter("v1");
String age=request.getParameter("v2");
%>
[
{"username": "<%= name %>","age":"<%= age %>"},
{"username" : "유관순","age":"10"},
{"username" : "강감찬","age":"20"}
]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>attribute(속성)</title>
<script type="text/javascript" src="../jquery-3.5.1.min.js"></script>
<script type="text/javascript">
	$(function () {
		$("#a").on("click",getData );//실행함수등록 
		
	});//end ready 
	
	function getData() {//비동기 실행함수 
		// $.ajax({ jsonObject형식으로 설정      })
		$.ajax({
			type:"get",//서버에 get/post방식 요청 
		//	url:"../AjaxServlet",  //서버 요청 주소 
			url:"AjaxServlet",  //서버 요청 주소 
			dataType:"text",//응답data타입 text, json, xml , html
			success: function (data, status, xhr) {//요청에 대한 응답이 성공했을 때 동작할 코드 
				//data: 응답으로 비동기 전송된 data
				console.log("success : ", data);
					$("#result").text(data);
				//	console.log(status, xhr);
				},
			error: function (xhr, status, e) {//요청에 대한 응답이 error 인 경우 때 동작할 코드
				console.log("error", e);
				console.log("xhr", xhr.status);
				$("#result").text("데이터를 가져올 수 없습니다."+ xhr.status);
			//	console.log("status", status)				
			}//error 
		}
		);	//ajax end 
	}//end getData
	
</script>
</head>
<body>
 <button id="a">ajax요청</button>
 <div id="result"></div>
</body>
</html>

 

 

  • html, jsp 가 각각 서버가 다른 경우
    1. 학생용 비동기 요청.html
    2. 교수용 jsp 파일에서 응답처리 : cross 도메인 문제 수락설정이 필요 :cors 수락설정 필요
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>attribute(속성)</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#a").on("click", getData);	
});
function getData() {
	$.ajax({
		type:"get",
		url: "http://localhost:8095/JQueryproject/10_ajax/sample02_json3.jsp",
		dataType:"json",
		success: function (data, status, xhr) {
			$.each(data, function (idx, ele) {//주의 
				$("#result").append(ele.username+":"+ele.age+"<br>");
			});
			$("#result").append("<HR>");
								
			for (var i = 0; i < data.length; i++) {
				$("#result").append(data[i].username+":"+data[i].age+"<br>");
			}				
		},
		error: function (xhr, status, error) {
			$("#result").append(error+"<br>");
			$("#result").append(xhr.status+"<br>");
		}		
	});
}
</script>
</head>
<body>
 <button id="a">ajax요청</button>
 <div id="result"></div>
</body>
</html>

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    //CORS 수락처리
    response.setHeader("Access-Control-Allow-Origin", "*");
System.out.println("콘서트 제발 성공");
    String name = "홍길동";
	int age =20;
%>
[{
 "username":"<%=name%>",
 "age":"<%=age %>"
},
{
 "username":"유관순",
 "age":"40"
},
{
 "username":"강감찬",
 "age":"55"
}]

'Daily Codig Reminder' 카테고리의 다른 글

spring - property  (1) 2024.02.06
스프링 준비  (0) 2024.02.05
json , ajax  (1) 2024.01.15
jquery:CSS  (0) 2024.01.13
ready, hierarchy  (0) 2024.01.12

관련글

티스토리툴바