ajax와 @ResponseBody

728x90

좋아요 ajax

<form id="like_form" >
											
       	<%-- <col width="50px"><col width="20px"> --%>


        <img style=" width: 50px; height: 50px; " alt = "" src = "./images/like.png" onclick="return like()">


        <div id="like_result" style="font-size: 15px;">${dto.like}명이 좋아합니다.</div>

        <input type="hidden" name="seq" value="${dto.seq}">

											
											</form>

ajax ->

<script type="text/javascript">
      function like(){
      $.ajax({
      url: "likeController",
      type: "POST",
      cache: false,
      dataType: "json",
      data: $('#like_form').serialize(), //아이디가 like_form인 곳의 모든 정보를 가져와 파라미터 전송 형태(표준 쿼리형태)로 만들어줌
      success:
      function(data){ //ajax통신 성공시 넘어오는 데이터 통째 이름 =data
      // data중 put한 것의 이름 like
      $("#like_result").html(data.like +"명이 좋아합니다."); //id값이 like_result인 html을 찾아서 data.like값으로 바꿔준다.
      },
      error:
      function (request, status, error){
      alert("ajax실패")
      }
      });
      }

package controller;

import java.io.IOException;

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.MustEatDao;


import net.sf.json.JSONObject;

@WebServlet("/likeController")
public class LikeController extends HttpServlet {

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

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doProcess(req, resp);
	}
	
	protected void doProcess(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		int seq = Integer.parseInt(req.getParameter("seq"));
		
		MustEatDao dao = MustEatDao.getInstance();
		dao.updatelike(seq);
		
		int like = dao.selectlike(seq);
		System.out.println("좋아요 개수 = " + like);
		
		JSONObject obj = new JSONObject();
		obj.put("like", like);
		
		resp.setContentType("application/x-json; charset=UTF-8");
		resp.getWriter().print(obj);
		
	}

project // sample5ajax

pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>sample5ajax</groupId>
  <artifactId>sample5ajax</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>war</packaging>
  <build>
    <plugins>
      <plugin>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>3.8.1</version>
        <configuration>
          <release>15</release>
        </configuration>
      </plugin>
      <plugin>
        <artifactId>maven-war-plugin</artifactId>
        <version>3.2.3</version>
      </plugin>
    </plugins>
  </build>
  
  <dependencies>
			<dependency>
			    <groupId>org.springframework</groupId>
			    <artifactId>spring-webmvc</artifactId>
			    <version>5.3.3</version>
			</dependency>
			<dependency>
			    <groupId>log4j</groupId>
			    <artifactId>log4j</artifactId>
			    <version>1.2.17</version>
			</dependency>
			
			<dependency>
			    <groupId>org.slf4j</groupId>
			    <artifactId>slf4j-simple</artifactId>
			    <version>1.7.25</version>
			    
			</dependency>
			
					<!-- Java용 json 라이브러리(XML/YAM/CSV) data-processing 툴 -->
		  	<dependency>
			    <groupId>com.fasterxml.jackson.core</groupId>
			    <artifactId>jackson-core</artifactId>
			    <version>2.10.1</version>
			</dependency>
			
			<dependency>
			    <groupId>com.fasterxml.jackson.core</groupId>
			    <artifactId>jackson-databind</artifactId>
			    <version>2.10.1</version>
			</dependency>
				
			
</dependencies>  
  
  
</project>

servlet-context.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd
		http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd">

	<!-- spring MVC annotation(주석문, 지시문)을 사용하기 위한 설정 -->
	<context:annotation-config/>
	
	<!-- viewResolver 설정(사용자의 view의 위치, 확장자명) -->
	<bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="prefix" value="/WEB-INF/views/"></property>	<!-- views의 경로 -->
		<property name="suffix" value=".jsp"></property>			<!-- 확장자 명 -->	
	</bean>

	<!-- 
		InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();
		viewResolver.prefix = "/WEB-INF/views/";
		viewResolver.suffix = ".jsp";
	 -->
	 
	 <!-- java 공통 패키지 -->
	 <context:component-scan base-package="bit.com.a"/>
	 
	 <!-- Ajax 주석문을 사용허가 -->
	 <mvc:annotation-driven/>
	 
	 <!-- spring에서 처리할 수 없는 요청은 tomcat에 위임 -->
	 <mvc:default-servlet-handler/>

</beans>

bit.com.a -> HelloController

package bit.com.a;

import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import bit.com.a.dto.Human;
import bit.com.a.dto.MyClass;

@Controller
public class HelloController {
	private static Logger logger = LoggerFactory.getLogger(HelloController.class);
	
	
	//1번
	@RequestMapping(value="hello.do", method = RequestMethod.GET)
	public String hello(Model model) {
		
		logger.info("HelloController hello()" + new Date());
		
		MyClass cls = new MyClass(1234, "주지훈");
		
		model.addAttribute("mycls", cls);//짐싸
		
		
		return "hello";
	
	
	
	}
	//2번 뷰에서 컨트롤러 전송받음
	@RequestMapping(value="move.do", method = { RequestMethod.GET,RequestMethod.POST})
	public String move(Model model, MyClass mycls) {
		
		logger.info("HelloController move()" + new Date());
		
		
		model.addAttribute("mycls", mycls);
		System.out.println(mycls.toString());
		
		return "hello";
		
	}
	
	//3번 ajax
	@ResponseBody  //ajax 사용시 반드시 사용
	@RequestMapping(value="idcheck.do", method = { RequestMethod.GET,RequestMethod.POST},
					produces = "application/String; charset=utf-8")
	//한국말나오려면 프로덕스
	
	public String idcheck(String id) {
		logger.info("HelloController idcheck()" + new Date());
		
		System.out.println("id="+id);
		
		String str = "오케이";
		
		return str;
		
	}
	
	
	//4번 JSON
	@ResponseBody
	@RequestMapping(value="account.do", method = { RequestMethod.GET,RequestMethod.POST})
	public Map<String, Object> account(Human h){
	//Map<String, Object> attribute형태라고 생각
	
		logger.info("HelloController account()" + new Date());
	
	
		System.out.println(h.toString());
		//DB접근
		
		//날려줄거 준비
		Map<String, Object> map = new HashMap<String, Object>();
		map.put("message", "내가보낸 메세지입니다");
		map.put("name", "송중기");
		
		return map;
	
	}
	
	//5번 JSON 리스트로 받기
		@ResponseBody
		@RequestMapping(value="read.do", method = { RequestMethod.GET,RequestMethod.POST})
		public List<MyClass> list(){
		//Map<String, Object> attribute형태라고 생각
		
			logger.info("HelloController list()" + new Date());
		
			System.out.println("list");
			
			//DB접근
			
			//날려줄거 준비
			List<MyClass> list = new ArrayList<MyClass>();
			list.add(new MyClass(456, "원빈"));
			list.add(new MyClass(456, "강동원"));
			
			return list;
		
		}
	
	
	
}//class end

views / hello.jsp

<%@page import="bit.com.a.dto.MyClass"%>
<%@ 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>


<!-- 1 컨트롤러에서 뷰로 짐풀기-->
<%
	MyClass cls = (MyClass)request.getAttribute("mycls");

%>

번호:<%=cls.getNumber() %>
이름:<%=cls.getName() %>

<br>
number:${mycls.number }<br>
name:${mycls.name }<br>
<br>

<!--2 뷰에서 컨트롤러로 이동할 경우  -->
<form action="move.do" method="post">
번호:<input type="text" name = "number" size="20">
이름:<input type="text" name = "name" size="20">
<input type="submit" value="이동">


</form>
<br><br>
<!--3 ajax id 전송 -->

<h3>3. ajax</h3>


아이디:<input type="text" id="checkid">
<br><br>
<button type="button" onclick="idcheck()">아이디체크</button>

<script type="text/javascript">

function idcheck() {
	$.ajax({
		
		url:"idcheck.do",
		type:"get",
		//data:"id="+$("#checkid").val(),
		
		//JSON 형식으로 데이터를 보낸다
		data:{id:$("#checkid").val()},
		
		success:function(data){
			//alert("success");
			alert(data);
			
		},
		error:function(){
			alert("error");
		}
	});
}




</script>



<br><br>
<!--4 
 json - > object(controller)
 map(controller) -> json(web)

-->
<h3>4. json</h3>

이름:<input type="text" id="name" value="송중기"><br>
전화:<input type="text" id="phone" value="010-456"><br>
이메일:<input type="text" id="email" value="vivi@na"><br>
생년월일:<input type="text" id="birth" value="1997/11/14"><br>

<button type="button" id="account">회원가입</button>


<script type="text/javascript">

$("#account").click(function(){
	
	alert("click");
	//JSON형식으로 데이터를 보낸다
	var human={
			name:$("#name").val(),
			phone:$("#phone").val(),
			email:$("#email").val(),
			birth:$("#birth").val()
			
	};
	
	
		$.ajax({
				
				url:"account.do",
				type:"post",
				dataType:"json",
				data:human,
				async:true,//비동기 처리이다
				
				success:function(data){
					//alert("success");
					alert(data.message);
					alert(data.name);
					alert(data);//그냥찍으면 오브젝트로 넘어온다
					
					alert(JSON.stringify(data)); //json-> String // string -> json : JSON.parse()
					
					
				},
				error:function(){
					alert("error");
				}
			});
	
	
	
});





</script>

<h3>5. data read(list)</h3>
<div id="datas">
</div>

<button type="button" onclick="read()">리스트출력</button>
<script type="text/javascript">
function read(){
	
	alert("read");
	$.ajax({
			
			url:"read.do",
			type:"post",
			async:true,//비동기 처리이다
			
			success:function(data){
				alert("success");
				
				
				var str = '';
				$.each(data, function(i, item){
					str += item.number;
					str += item.name + "<br>";
					
					
				});
				
				$("#datas").html(str);
				
				
			},
			error:function(){
				alert("error");
			}
		});
	
}

</script>

<h3>Hello.jsp</h3>

</body>
</html>

'스프링 Spring > 🧶 스프링 프레임워크 Spring' 카테고리의 다른 글

Tiles를 활용한 게시판 만들기 (로그인, 회원가입) (0)	2021.06.22
Tiles를 활용한 게시판 만들기와 Tiles 설정법 (0)	2021.06.22
service와 serviceImpl에 대해서... (0)	2021.06.22
@Autowired 란 .... ? (0)	2021.06.22
마이바티스(Mybatis)를 이용한 insert, delete, update, select (0)	2021.06.22

👨‍💻 코딩 도서관

ajax와 @ResponseBody

좋아요 ajax

'스프링 Spring > 🧶 스프링 프레임워크 Spring' 카테고리의 다른 글

댓글

티스토리툴바

ajax와 @ResponseBody

좋아요 ajax

'스프링 Spring > 🧶 스프링 프레임워크 Spring' 카테고리의 다른 글

관련글

댓글

티스토리툴바