JSP/연습
fetch 서블릿연계 post //배열
by SEOKIHOUSE
2023. 7. 14.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<button id="btn" onclick="f()">버튼클릭</button>
<hr>
<p id="demo"></p>
<table border='1'>
<tr>
<th>번호</th>
<th>이름</th>
<th>나이</th>
</tr>
</table>
<script>
<%--
1. 람다식 풀어서 쓴 것
function f() {
fetch('fetchServlet')
.then(resp => resp.json())
.then(function(value1) {
for(let i =0; i<value1.length; i++) {
document.getElementById("demo").innerHTML += value1[i].num + value1[i].name + value1[i].age;
}
})
}
--%>
<%--
2. 람다식연습
function f() {
fetch('fetchServlet')
.then(resp => resp.json())
.then(value1 => {
for(let i =0; i<value1.length; i++) {
document.getElementById("demo").innerHTML += value1[i].num + value1[i].name + value1[i].age;
}
})
}
--%>
function f() {
fetch('fetchServlet', {
method: 'POST'
})
.then(resp => resp.json())
.then(value1 => {
for(let i =0; i<value1.length; i++) {
document.querySelector("table").innerHTML +=
'<tr>'+
'<td>'+value1[i].num+'</td>'+
'<td>'+value1[i].name+'</td>'+
'<td>'+value1[i].age+'</td>'+
'</tr>';
}
})
}
</script>
</body>
</html>
package servlets;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONArray;
import vo.MemberVo;
@WebServlet("/fetchServlet")
public class FetchServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
ArrayList<MemberVo> ar = new ArrayList<>();
MemberVo mv = new MemberVo();
mv.setNum(1);
mv.setName("짱구");
mv.setAge(7);
MemberVo mv1 = new MemberVo();
mv1.setNum(2);
mv1.setName("훈이");
mv.setAge(7);
MemberVo mv2 = new MemberVo();
mv2.setNum(3);
mv2.setName("흰둥이");
mv2.setAge(3);
MemberVo mv3 = new MemberVo();
mv3.setNum(4);
mv3.setName("짱아");
mv3.setAge(4);
ar.add(mv);
ar.add(mv1);
ar.add(mv2);
ar.add(mv3);
JSONArray jarray = new JSONArray(ar);
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.print(jarray);
}
}
package vo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class MemberVo {
private int num;
private String name;
private int age;
}
