Web : 글 보기 게시판에 댓글 보는 기능 붙여주기 (ajax+JSON)

1. pom.xml 등록 

<dependency>

<groupId>com.fasterxml.jackson.core</groupId>

<artifactId>jackson-core</artifactId>

<version>2.2.2</version>

</dependency>

<dependency>

<groupId>com.fasterxml.jackson.core</groupId>

<artifactId>jackson-databind</artifactId>

<version>2.2.3</version>

</dependency>

<dependency>

<groupId>org.codehaus.jackson</groupId>

<artifactId>jackson-mapper-asl</artifactId>

<version>1.9.13</version>

</dependency>

<dependency>

<groupId>com.googlecode.json-simple</groupId>

<artifactId>json-simple</artifactId>

<version>1.1.1</version>

</dependency>

<dependency>

<groupId>com.google.code.gson</groupId>

<artifactId>gson</artifactId>

<version>2.2.4</version>

</dependency>

*이건 왠지 나중에 쓸 것 같다.

<!-- <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-annotations</artifactId> 

<version>2.2.2</version> </dependency> <dependency> <groupId>commons-io</groupId> 

<artifactId>commons-io</artifactId> <version>2.4</version> </dependency> -->

2. servlet-context.xml 등록 

<beans:bean id="jsonMessageConverter"

class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">

</beans:bean>

*root-context.xml에는 등록 할 것이 없는 듯

3. Vo

package org.hotsix.reply.vo;

public class ReplyVo {

private Integer rno;

private Integer bno;

private String userid;

private Integer rpw;

private String rcont;

private String regdate;

public Integer getRno() {

return rno;

}

public void setRno(Integer rno) {

this.rno = rno;

}

public Integer getBno() {

return bno;

}

public void setBno(Integer bno) {

this.bno = bno;

}

public String getUserid() {

return userid;

}

public void setUserid(String userid) {

this.userid = userid;

}

public Integer getRpw() {

return rpw;

}

public void setRpw(Integer rpw) {

this.rpw = rpw;

}

public String getRcont() {

return rcont;

}

public void setRcont(String rcont) {

this.rcont = rcont;

}

public String getRegdate() {

return regdate;

}

public void setRegdate(String regdate) {

this.regdate = regdate;

}

@Override

public String toString() {

return "ReplyVo [rno=" + rno + ", bno=" + bno + ", userid=" + userid

+ ", rpw=" + rpw + ", rcont=" + rcont + ", regdate=" + regdate

+ "]";

}

}

4. Mapper

package org.hotsix.reply.mapper;

import java.util.List;

import org.apache.ibatis.annotations.Select;

import org.hotsix.reply.vo.ReplyVo;

public interface ReplyMapper {

@Select("select * from tbl_reply where bno= #{bno}")

public List<ReplyVo> replyList(String bno) throws Exception;

}

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE mapper

PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"

"http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="org.hotsix.reply.mapper.ReplyMapper">

</mapper>

5. Service

package org.hotsix.reply.service;

import java.util.List;

import org.hotsix.reply.mapper.ReplyMapper;

import org.hotsix.reply.vo.ReplyVo;

import org.springframework.stereotype.Service;

@Service

public class ReplyService {

public List<ReplyVo> replyList(ReplyMapper mapper, String bno ) throws Exception{

return mapper.replyList(bno);

}

}

6. JUnit Test

* 알아서 하세요

7. Controller

*BbsController에 다음 추가

@Inject

ReplyMapper replyMapper;

@Inject

ReplyService replyService;

@RequestMapping( method = RequestMethod.GET, produces = "application/json")

public @ResponseBody List<ReplyVo> reply(

@RequestParam(value = "bno", required = true, defaultValue = "1") String bno,

Locale locale, Model model) {

List<ReplyVo> replyList =null;

System.out.println(bno);

try {

replyList = replyService.replyList(replyMapper, bno);

System.out.println(replyList);

} catch (Exception e) {

e.printStackTrace();

}

return replyList;

}

* produces = "application/json" 이 부분이 있어야 폼 요청이 JSON으로 올때 JSON으로 보내주는 듯

8. JSP

* board.jsp에 reply 요청 폼, 결과 보여줄 div 태그 추가. 태그 중 빠진게 있을 수 있음.

<div id="reply_Form">

<form method="get" id="form_Reply"  action="reply">

<input type='hidden'  name='bno' value='${bvo.getBno()}'>

<Input type="submit" id=reply_Btn value='댓글 보기'>

</form>

<div id="div_reply2" class="alert alert-warning">

<strong>Warning!</strong> Best check yo self, you're not looking too good.

        </div>

</div>

9. JS

$(document).ready(function(){

var $form_reply = $("#form_Reply");

$form_reply.on('submit', function(evt){

evt.preventDefault();

var formData =$form_reply.serialize();

$.ajax({

type:"GET",

url: "reply",

data: formData, //변환된 formData를 요청 //

dataType: "JSON", <--필요 없는 부분

dataType: "JSON",

success: function(data){

var content = ""

$.each(data, function(idx, key){

// alert(JSON.stringify(key)); <-값을 JSON으로 바꿔줌. 값을 한번 보여줌.

content += "<div class=\"panel panel-success\">"

content += '<div class="panel-heading">';

content += '<ol class="reply-ol">';

content += "<li>" + key.userid;

content += "<li>" + key.regdate;

content += "</ol></div>";

content += '<div class="panel-body">'+key.rcont+'</div></div>'

$("#div_reply2").html(content);

})

}

});

});

});

* submit과 preventDefault 부분을 눈여겨 봐야 함.