👀 backend에서 데이터를 받을경우 해당 데이터는 jquery 아닌 js(전역변수)로 받는걸 권고
var data = "<%=Arrays.toString(userlist)%>"; // " "에 넣어야함!=> ⭐ java에서 원시배열로 script전송에 대한 값을 출력하지 못함
<%
String userlist[] = {"강호동","신동엽","유재석","김나래"};
int f;
String userdata = ""; //빈배열(front-end에게 전달할 변수)
for(f=0; f<userlist.length; f++){
if(f==0){
userdata = "'" + userlist[f] + "'";
}else{
userdata += ",'" + userlist[f] + "'";
}
}
%>=> '강호동','신동엽','유재석','김나래' 로 반복문 돌려 string 으로 전달해 front에서 [ ]에 담으면 배열이됨 (아래 jsp확인)
사실 class배열로 하면 더 쉬움..
∴ ❗ 백엔드 -> 프론트엔드로 배열 전달시 원시배열이 아닌 class배열로 전달할것을 권고 ❗
⚡ 원시배열
middle14.java
public class middle14 extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { RequestDispatcher rd = request.getRequestDispatcher("/js/middle14.jsp"); rd.forward(request,response); } }
middle14.jsp<%@page import="java.util.Arrays"%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String userlist[] = {"강호동","신동엽","유재석","김나래"}; int f; String userdata = ""; //빈배열(front-end에게 전달할 변수) for(f=0; f<userlist.length; f++){ if(f==0){ userdata = "'" + userlist[f] + "'"; }else{ userdata += ",'" + userlist[f] + "'"; } } %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery를 이용한 배열 출력(backend-data 포함)</title> <script src="./jquery.js"></script> </head> <body> <input type="button" value="유저리스트" id="btn"> <ul id="list"></ul> </body> <script type="text/javascript"> var data = [<%=userdata%>]; console.log(data); $(function(){ $("#btn").click(function(){ //var $data = Array.isArray(data); //var $data = Array.from(data); var $ea = data.length; var $w=0; while($w<$ea){ $("#list").append("<li>"+ data[$w] +"</li>"); $w++; } }) }) </script> </html>
결국 출력^^..
web.xml - middle14.jsp -> middle14.do 가상으로 띄우기 위함<servlet> <servlet-name>middle14</servlet-name> <servlet-class>js.middle14</servlet-class> </servlet> <servlet-mapping> <servlet-name>middle14</servlet-name> <url-pattern>/js/middle14.do</url-pattern> </servlet-mapping>
middle14.jsp
^^...
Array.isArray : 배열인지 아닌지 검토(true,false)-[,,]자체를 걍 텍스트로 인식 length도 텍스트 수만큼찍힘
Array.from : 문자(char)를 배열로 변환
🔽 🔽 🔽 🔽 class 배열 🔽 🔽 🔽 🔽
⚡ class배열
<%@page import="java.util.ArrayList"%> <%@page import="java.util.Arrays"%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% /* class배열 */ ArrayList<String> al = new ArrayList<String>(); al.add("홍길동"); al.add("유관순"); al.add("강감찬"); %> ~생략 <body> <input type="button" value="유저리스트" id="btn"> <input type="button" value="유저리스트2" id="btn2"> <ul id="list"></ul> </body> <script type="text/javascript"> /* class배열 */ var arr = new Array(); //js의 배열 선언문 <% int ww=0; while(ww<al.size()){ %> arr.push('<%=al.get(ww)%>') //jscode 끼워넣음 <% ww++; } %> $(function(){ $("#btn2").click(function(){ var $ea = arr.length; var $w=0; while($w<$ea){ $("#list").append("<li>"+ arr[$w] +"</li>"); $w++; } }); }) </script> </html>
<%
int n=0;
%>
//var n=1; 이건 js라 data2에 넣을시 error => js언어 안에 java언어를 넣을수 없다!!
var data2 = "<%=al.get(n)%>"; //제대로 출력
'CLASS > JQUERY' 카테고리의 다른 글
| #5 / 회원가입 data mysql로 전달 (0) | 2024.06.14 |
|---|---|
| #4-1 / jquery 이용 룰렛 제작 (0) | 2024.06.13 |
| #3-1 / jquery이용한 form + submit (0) | 2024.06.12 |
| #2 / jquery checkbox (0) | 2024.06.12 |
| #1 / jquery (1) | 2024.06.11 |