ajax 응용하여 아이디 중복확인, 아이디 검색시 회원정보 조회, 게시글 번호 조회시 게시글 댓글정보 출력하기

꿈꾸는하늘·2024년 3월 24일

JSP

목록 보기
15/25

아이디 중복확인, 아이디 검색시 회원정보 조회

  • Ajax.jsp
<%@ 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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>
<body>
	<label for="content">입력 : </label>
	<input type="text" name="text" id = "content">
	<input type="button" value="제출" id="btn">
	<div id="searchResult"></div>
	
	<script>
		$(document).ready(function(){
			$("#btn").click(function(){
				let input = $("#content").val();
				$.ajax({
					url : "ajax",
					type:"get",
					dataType : "json",
					data:{id:input},
					success : function(data){
		                  console.log(data)
		                  document.querySelector("#searchResult").innerHTML = data.id;		                  
		                  document.querySelector("#searchResult").innerHTML = data.pw;		                  
		                  document.querySelector("#searchResult").innerHTML = data.name;		                  
		               },
					error: function(request, status, error)
					{console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error) }// 에러가 발생했을 때, 호출될 함수
				})
			})
			
		})
		
	</script>
</body>
</html>
  • Ajax.java
package controller;

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.simple.JSONArray;
import org.json.simple.JSONObject;

import dao.CommentDao;
import dao.MemberDao;
import dto.Comment;
import dto.Member;

@WebServlet("/ajax")
public class Ajax extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//		System.out.println(req.getParameter("text"));
//		resp.setContentType("application/json; charset=utf-8");

//		JSONObject sObject = new JSONObject();
//		sObject.put("check", "success");
//		out.println(sObject);
//	
		//중복확인
//		 MemberDao dao = new MemberDao(req.getServletContext()); 
//		 //String id = req.getSession().getAttribute("id")+"";
//		 String id = req.getParameter("text");
//		 Member mem = dao.login(id); 
//		 JSONObject sObject2 = new JSONObject();
//		 resp.setContentType("application/json; charset=UTF-8"); 
//		 PrintWriter out = resp.getWriter();
//		 
//		 if(mem!=null) {
//			 sObject2.put("check", "fail"); out.println(sObject2); 
//		}else {
//		 sObject2.put("check", "success"); out.println(sObject2); }
		 
		 
		
		//아이디 검색하면 아이디, 비밀번호, 이름값 출력하기
		
		 MemberDao dao = new MemberDao(req.getServletContext()); 
		 String id = req.getParameter("id"); 
		 Member mem = dao.login(id); 
		 JSONObject sObject = new JSONObject();
		 
		 if(mem!=null) {
		 sObject.put("id", mem.getId()); 
		 sObject.put("pw", mem.getPw());
		 sObject.put("name", mem.getName());
		 }
		 else {
			 sObject.put("id", "notMember"); 
		 }
		 resp.setContentType("application/json; charset=UTF-8"); 
		 PrintWriter out = resp.getWriter(); 
		 
		 out.println(sObject);
		
		
	}
}

게시글 번호 조회시 게시글 댓글정보 출력하기

  • Ajax2.jsp
<%@ 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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>
<body>
	<label for="content">게시물 번호 입력 : </label>
	<input type="text" name="text" id = "bno">
	<input type="button" value="제출" id="btn">
	<div id="searchResult"></div>
	
	<script>
		$(document).ready(function(){
			$("#btn").click(function(){
				let bno = $("#bno").val();
				$.ajax({
					url : "ajax2",
					type:"get",
					dataType : "json",
					data:{bno:bno},
					success : sucFuncJson,
					error: function(request, status, error)
					{console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error) }// 에러가 발생했을 때, 호출될 함수
				})
			})
			
		})
		
		function sucFuncJson(d){
		let list = "";
		console.log(d);
		 $.each(d, function(index, item){
			list += '<ul>';
			list += '<li> 댓글번호 : '+item.cno+'</li>';
			list += '<li> 게시글번호 : '+item.bno+'</li>';
			list += '<li> 댓글내용 : '+item.comment+'</li>';
			list += '<li> 작성자 : '+item.commenter+'</li>';
			list += '<li> 작성일 : '+item.regDate+'</li>';
			list += '</ul><hr>'
		});
			document.querySelector("#searchResult").innerHTML = list;
		}
	</script>
</body>
</html>
  • Ajax2.java
package controller;

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.simple.JSONArray;
import org.json.simple.JSONObject;

import dao.CommentDao;
import dao.MemberDao;
import dto.Comment;
import dto.Member;

@WebServlet("/ajax2")
public class Ajax2 extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		//게시글 번호 조회시 게시글 정보(댓글) 출력하기
		 CommentDao dao = new CommentDao(req.getServletContext());
		 String bno = req.getParameter("bno");
		 ArrayList<Comment> comment = dao.selectAll(bno);

		 JSONArray array = new JSONArray();
		 for(Comment tmp : comment) {
		 JSONObject sObject = new JSONObject();
		 sObject.put("cno", tmp.getCno());
		 sObject.put("bno", tmp.getBno());
		 sObject.put("comment", tmp.getComment());
		 sObject.put("commenter", tmp.getCommenter());
		 sObject.put("regDate", tmp.getRegDate()+"");
		 
		 array.add(sObject);
		 }
		 
		 resp.setContentType("application/json; charset=utf-8");
		 PrintWriter out = resp.getWriter();
		 out.println(array);
		 
	}

}

0개의 댓글