ajax로 crud해보기//JSON 1일차..

이렇게 했는데 값이 안나와서 알아보니..

라고 하심다 request로 못넘겨서 제이슨으로 responseText로 넘기는듯 ㅇㅇ

그리고 댓글달고 바로~ 값 나오도록하려면

1. 페이지 리로드

2. 오늘 한거처럼 아작스로 innerhtml로 적어주는거? 말고는 아직 모르겠다..

JSON 쓴 곳

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script>
		window.onload = function () {
			let names = document.querySelector("input[name=name]");
			let ids = document.querySelector("input[name=id]");
			let pws = document.querySelector("input[name=pw]");
			let characters = document.querySelector("input[name=character]");
			const sbmBtn = document.querySelector("#btn");
			
			sbmBtn.addEventListener("click", regist);
			
			function regist() {
				const xhttp = new XMLHttpRequest();
				xhttp.onreadystatechange = function () {
					if(xhttp.readyState ===4 && xhttp.status ===200) {
						alert(this.responseText);
					}
				}
				xhttp.open("POST","RegistServlet",true);
				xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
				const data ="name="+names.value +"&id="+ids.value +"&pw=" +pws.value + "&character="+characters.value;
				xhttp.send(data);
			}
			
			
			<%--조회 --%>
			const selectBtn = document.querySelector("#allselect");
			let tables = document.querySelector("table");			
			
			selectBtn.addEventListener("click", function select() {
				const xhttp = new XMLHttpRequest();
				xhttp.onreadystatechange =function() {
					if(xhttp.readyState ===4 && xhttp.status ===200) {
						let jstr = this.responseText;
						let jObj = JSON.parse(jstr);
						
						tables.style.display ="";
						alert("조회완료");
						
						tables.innerHTML = 
					'<tr>'+
						'<th>번호</th>'+
						'<th>이름</th>'+
						'<th>아이디</th>'+
						'<th>비번</th>'+
						'<th>최애 캐뤽터</th>'+
					'</tr>';
					
						for(let i =0; i<jObj.length; i++) {
							tables.innerHTML +=
						'<tr>'+
							'<td>'+jObj[i].num+'</td>'+
							'<td>'+jObj[i].name+'</td>'+
							'<td>'+jObj[i].id+'</td>'+
							'<td>'+jObj[i].pw+'</td>'+
							'<td>'+jObj[i].favoriteCharacter+'</td>'+
						'</tr>';
						}
						
					}
				}
				xhttp.open("POST","selectServlet",true);
				xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
				xhttp.send();
			})
			
			<%-- 숨기기--%>
			const hideBtn = document.querySelector("#hide");
			hideBtn.addEventListener("click", function hide() {
				tables.style.display="none";
			})
			
			
			const upBtn = document.querySelector("#update");
			upBtn.addEventListener("click", up);
			
			function up() {
			<%--수정 --%>
			let nums =document.querySelector("input[name=yournum]").value;
			let rename =document.querySelector("input[name=rename]").value;
			let reid =document.querySelector("input[name=reid]").value;
			let repw =document.querySelector("input[name=repw]").value;
			let rech =document.querySelector("input[name=rech]").value;
				const xhttp = new XMLHttpRequest();
				xhttp.onreadystatechange =function() {
					if(xhttp.readyState ===4 && xhttp.status ===200) {
						alert(this.responseText);
					}
				}
				xhttp.open("POST","updateServlet",true);
				xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
				const updata ="nums="+nums +"&rename="+rename+"&reid="+reid+"&repw="+repw +"&rech="+rech;
				xhttp.send(updata);
			}
			
			const delBtn = document.querySelector("#delete");
			delBtn.addEventListener("click", del);
			
			function del() {
				let delnum =document.querySelector("input[name=delnum]").value;
				
				const xhttp = new XMLHttpRequest();
				xhttp.onreadystatechange =function() {
					if(xhttp.readyState ===4 && xhttp.status ===200) {
						alert(this.responseText);
					}
				}
				xhttp.open("POST","deleteServlet",true);
				xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
				const deldata ="delnum="+delnum;
				xhttp.send(deldata);
			}
		}
			
	</script>
</head>
<body>
	<h1>AJAX</h1>
	<hr>
	<h3>1)회원등록</h3>
	이름<input type="text" name="name"><br>
	아이디 <input type="text" name="id"><br>
	비번 <input type="password" name="pw"><br>
	최애 캐릭터 <input type="text" name="character">
	<input id="btn" type="submit" value="회원등록하기">
	<input type="reset" value="리셋">
	
	<hr>
	<h3>2)조회</h3>
	<button id="allselect" type="button">전체조회</button>
	<button id="hide" type="button">숨기기</button><br>
	
	<table border="1" style="display:none;"></table>
	<hr>
	
	<h3>3)수정</h3>
	당신의 번호<input type="text" name="yournum"><br>
	수정할 이름<input type="text" name="rename"><br>
	수정할 아이디<input type="text" name="reid"><br>
	수정할 비번<input type="password" name="repw"><br>
	수정할 최애캐릭<input type="text" name="rech"><br>
	<button id="update">수정</button><br>
	
	
	<hr>
	<h4>4)삭제</h4>
	나의 번호<input type="text" name="delnum"><br>
	<button id="delete">삭제</button><br>
	
	
	
</body>
</html>

package servlet;

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 dao.MemberDAO;
import vo.MemberVo;

@WebServlet("/selectServlet")
public class selectServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		MemberDAO md = new MemberDAO();
		ArrayList<MemberVo> ar = md.select();
		
		JSONArray jList = new JSONArray(ar);
		String jsonObj = jList.toString();
		System.out.println(ar);
		System.out.println(jsonObj);
		
		response.setContentType("text/html;charset=utf-8");
		PrintWriter pw = response.getWriter();
		pw.print(jsonObj);
	}

}

package servlet;

import java.io.IOException;
import java.io.PrintWriter;

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 dao.MemberDAO;
import vo.MemberVo;

@WebServlet("/RegistServlet")
public class RegistServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		int num =0;
		request.setCharacterEncoding("utf-8");
		String name = request.getParameter("name");
		String id = request.getParameter("id");
		String pw = request.getParameter("pw");
		String character = request.getParameter("character");
		
		MemberVo mv = new MemberVo(num,name,id,pw,character);
		
		MemberDAO md = new MemberDAO();
		int result =md.regist(mv);
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		if(result ==1) {
			out.print("등록완료");
		}else {
			System.out.println("등록실패");
		}
	}

}

package servlet;

import java.io.IOException;
import java.io.PrintWriter;

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 dao.MemberDAO;
import vo.MemberVo;

@WebServlet("/updateServlet")
public class updateServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		
		String n = request.getParameter("nums");
		int num = Integer.parseInt(n);
		String rename = request.getParameter("rename");
		String reid = request.getParameter("reid");
		String repw = request.getParameter("repw");
		String rech = request.getParameter("rech");
		
		MemberVo mv = new MemberVo(num,rename,reid,repw,rech);
		
		MemberDAO md = new MemberDAO();
		int result =md.update(mv);
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		if(result ==1) {
			out.print("수정완료");
		}
		
	}

}

package servlet;

import java.io.IOException;
import java.io.PrintWriter;

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 dao.MemberDAO;
import vo.MemberVo;

@WebServlet("/deleteServlet")
public class deleteServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		
		String n = request.getParameter("delnum");
		int delnum = Integer.parseInt(n);
		
		MemberVo mv = new MemberVo();
		mv.setNum(delnum);
		
		MemberDAO md = new MemberDAO();
		int result =md.delete(mv);
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		if(result ==1) {
			out.print("수정완료");
		}
		
	}

}

package dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;

import vo.DBcon;
import vo.MemberVo;

public class MemberDAO {
	public ArrayList<MemberVo> select() {
		ArrayList<MemberVo> ar = new ArrayList<>();
		try {
			Connection conn = DBcon.getConnection();
			String query = "SELECT * FROM memberstore";
			PreparedStatement stmt = conn.prepareStatement(query);
			ResultSet rs = stmt.executeQuery();
			while(rs.next()) {
				int num = rs.getInt("num");
				String name = rs.getString("name");
				String id = rs.getString("id");
				String pw = rs.getString("pw");
				String favoriteCharacter = rs.getString("favoriteCharacter");
				MemberVo mv = new MemberVo(num,name,id,pw,favoriteCharacter);
				ar.add(mv);
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		return ar;
	}
	
	public int regist(MemberVo mv) {
		int result =0;
		try {
			Connection conn = DBcon.getConnection();
			String query = "INSERT INTO memberstore (name,id,pw,favoriteCharacter) ";
				   query+= "VALUES (?,?,?,?)";
			PreparedStatement stmt = conn.prepareStatement(query);
			stmt.setString(1, mv.getName());
			stmt.setString(2, mv.getId());
			stmt.setString(3, mv.getPw());
			stmt.setString(4, mv.getFavoriteCharacter());
			
			result =stmt.executeUpdate();
		} catch (Exception e) {
			e.printStackTrace();
		}
		return result;
	}
	
	public int update(MemberVo mv) {
		int result =0;
		try {
			Connection conn = DBcon.getConnection();
			String query = "UPDATE memberstore SET NAME=?,id=?,pw=?,favoriteCharacter=? WHERE num=?";
			PreparedStatement stmt = conn.prepareStatement(query);
			stmt.setString(1, mv.getName());
			stmt.setString(2, mv.getId());
			stmt.setString(3, mv.getPw());
			stmt.setString(4, mv.getFavoriteCharacter());
			stmt.setInt(5, mv.getNum());
			
			result =stmt.executeUpdate();
		} catch (Exception e) {
			e.printStackTrace();
		}
		return result;
	}
	
	public int delete(MemberVo mv) {
		int result =0;
		try {
			Connection conn = DBcon.getConnection();
			String query = "DELETE FROM memberstore where num=?";
			PreparedStatement stmt = conn.prepareStatement(query);
			stmt.setInt(1, mv.getNum());
			
			result =stmt.executeUpdate();
		} catch (Exception e) {
			e.printStackTrace();
		}
		return result;
	}
}

package vo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class MemberVo {
	private int num;
	private String name;
	private String id;
	private String pw;
	private String favoriteCharacter;
	
}

package vo;

import java.sql.Connection;
import java.sql.DriverManager;

public class DBcon {
	public static Connection getConnection() throws Exception{
		Class.forName("org.mariadb.jdbc.Driver");
		String url ="jdbc:mariadb://localhost:3306/usingajax";
		Connection conn = DriverManager.getConnection(url,"root","1234");
		return conn;
	}
}

0620practice.zip

2.74MB

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

'JSP > 연습' 카테고리의 다른 글

정처기산업2번째문제 (0)	2023.06.25
그럼 JSON으로 클라-> 서블렛 // 서블렛 -->클라로 해보자 (0)	2023.06.21
게시글 댓글연습 +AJAX + JSON 추가로 배운거 써먹기 //JSONArray //toString() (0)	2023.06.19
1회차 정보처리 산업기사 문제 풀어보기 (0)	2023.06.16
JSLT로 구구단 (0)	2023.06.15