ajax data 통신
do 통신을 할 경우 - 결과에 대해서만 write (배열,문자열,결과값)
⚡ ajax <-> .do 파일 data 전송
- ajax1.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ajax로 select 값 변경</title> </head> <body> <select onchange="infodata(this.value)"> <option value="data1">데이터1</option> <option value="data2">데이터2</option> <option value="data3">데이터3</option> </select> <div id="dataload"> 데이터 출력 </div> </body> <script> function infodata(z){ var http,result; http = new XMLHttpRequest(); http.onreadystatechange = function(){ if(http.readyState==4 && http.status==200){ console.log(this.response) } } http.open("post","./ajax2.do",true); http.setRequestHeader("content-type","application/x-www-form-urlencoded"); http.send("idx="+z); } </script> </html>
- ajax2.do(servlet)public class ajax2 extends HttpServlet { private static final long serialVersionUID = 1L; //get두 되구 post두 되구 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { PrintWriter pw = response.getWriter(); String idx= request.getParameter("idx"); pw.write(idx); //바로 console에 찍힘 pw.close(); } }
print.write => console.log(this.response) 요렇게 찍힘
❗ dispatcher 사용시 주의 : ajax로 호출시 dispatcher는 작동하지 않음(form,location.href일때만 작동)
⚡ 이렇게 보내두댐 1
- ajax2.do (servlet)
String data1 = "[조선호텔]"; String data2 = "방1, 주방1, 거실1, 화장실1"; String data3 = "168000"; StringBuffer sb = new StringBuffer(); sb.append(data1); sb.append(data2); sb.append(data3); pw.write(sb.toString()); //문자열로 보내서 split 하는 방법
⚡ 이렇게 보내두댐2 (배열루)
eval로
- ajax1.jsp
eval : 변수를 script화 시키는 애
<body> <select onchange="infodata(this.value)"> <option value="data1">데이터1</option> <option value="data2">데이터2</option> <option value="data3">데이터3</option> </select> <div id="dataload"> 데이터 출력 </div> </body> <script> function infodata(z){ var http,result; http = new XMLHttpRequest(); http.onreadystatechange = function(){ if(http.readyState==4 && http.status==200){ eval(this.response); console.log(data); } } http.open("post","./ajax2.do",true); http.setRequestHeader("content-type","application/x-www-form-urlencoded"); http.send("idx="+z); } </script>
- ajax2.do (servlet)
eval로 front-end에서 받을시 <script>태그는 사용 X !!String data1 = "[조선호텔]"; String data2 = "방1, 주방1, 거실1, 화장실1"; String data3 = "168000"; pw.write("var data = new Array();" //<script> 넣으면 안됨 + "data.push('"+ data1 +"');" + "data.push('"+ data2 +"');" + "data.push('"+ data3 +"');"); /* 반복문 사용도 가능 pw.write("var data = new Array();"); int w=0; while(w<3) { pw.write("data.push('"+ data1 +"');"); //ajax로 response 받는 값 w++; } */
요렇게 출력
'CLASS > AJAX' 카테고리의 다른 글
| #4-2 / ECMA + Ajax (POST통신) (0) | 2024.07.17 |
|---|---|
| #4-1 / ECMA + Ajax (GET통신) - 아이디 중복확인 (0) | 2024.07.17 |
| #2-1 / id 중복체크 연습용(ajax) - POST (0) | 2024.06.24 |
| #1-4 / js, jquery - 외부 data load (CORS 해결) (0) | 2024.06.20 |
| #1-3 / 🌺 ajax(jquery) (0) | 2024.06.20 |