Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

moozi

5/28 test.jsp 본문

TIS_2018/응용sw2018_1기

5/28 test.jsp

moozi 2018. 5. 28. 15:23

<%@ 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>

<style>

#modDiv{

width:300px;

height:100px;

background:gray;

position:absolute;

top:50%;

left:50%;

margin-top:-50px;

margin-left:-150px;

padding:10px;

z-index:1000;

}

</style>

<script scr="/resources/plugins/jQuery/jQuery-2.1.4.min.js"></script>

<script>

$(document).ready(function(){

//목록출력 함수----------------------------------------------------

function getAllList(){

var bno=32755;

$.getJSON("/replies/all/"+bno, function(data){

console.log(data.length);

var str="";

$(data).each(function(){

str+="<li data-rno='"+this.rno+"' class='replyLi'>"

+this.rno+":"+this.replytext

+"<button>MOD</button></li>";

});

$("#replies").html(str);

});

}

//목록출력 함수.끝.------------------------------------------------

//목록출력.페이징처리. 함수----------------------------------------------------

function getPageList(){

var bno=32755;

$.getJSON("/replies/"+bno+"/"+page, function(data){

console.log(data.list.length);

var str="";

$(data.list).each(function(){

str+="<li data-rno='"+this.rno+"' class='replyLi'>"

+this.rno+":"+this.replytext

+"<button>MOD</button></li>";

});

$("#replies").html(str);

printPaging(data.pageMaker);

});

}

//목록출력.페이징처리. 함수.끝.-->

//페이징처리.서브.------------------------------------------------>

function printPaging(pageMaker){

var str="";

if(pageMaker.prev){

str+="<li><a href='"+(pageMaker.startPage-1)+"'><<</a></li>"

}

for(var i=pageMaker.startPage, len=pageMaker.endPage;i<=len;i++){

var strClass=pageMaker.cri.page==i?'class=active':'';

str+="<li "+strClass+"><a href='"+i+"'>"+i+"</a></li>";

}

if(pageMaker.next){

str+="<li><a href='"+(pageMaker.endPage+1)+"'>>></a></li>";

}

$(".pagination").html(str);

}

//페이징처리.서브.끝 --

//아직 생성되지 않은 버튼에 이벤트 처리하기

$("#replies").on("clcik",".replyLi button",function(){

var reply=$(this).parent();

var rno=reply.attr("data-rno");

var replytext=reply.text();

alert(rno+":"+replytext);

});

//아직 생성되지 않은 페이지 링크에 이벤트 처리하기

var replyPage=1;

$(".pagination").on("click","li a",function(){

event.preventDefault();//링크 기본 이벤트 취소

replyPage=$(this).attr("href");

getPageList(replyPage);

});

$("#replyAddBtn").on("click",function(){

var replyer=$("#newReplyWriter").val();

var replytext=$("#newReplyText").val();

$.ajax({

type:"post",

url:"/replies",

headers:{

"Content-Type":"application/json",

"X-HTTP-Method-Override":"POST"

},

dataType:"text",

data:JSON.stringif({

bno:bno,replyer:replyer,replyText:replytext

}),

success:function(result){

if(result=="SUCCESS"){

alert("등록되었습니다");

getAllList();

}

}

});

});

});

</script>

</head>

<body>

<h2>Ajax Test</h2>

<div>

<div>

REPLYER <input type="text" name="replyer" id="newReplyWriter">

</div>

<div>

REPLY TEXT <input type="text" name="replytext" id="newReplyText">

</div>

<button id="replyAddBtn">ADD REPLY</button>

</div>

<!-- 댓글목록 ----------------------------------------------------->

<ul id="replies">

</ul>

<!-- 댓글목록.끝 -->

<!-- 페이징 ------------------------------------------------------>

<ul class="pagination">

</ul>

<!-- 페이징.끝 -->

<!-- 모달창 ------------------------------------------------------>

<div id="modDiv" style="diplay:none">

<div class="modal-title"></div>

<div>

<input type="text" id="replytext">

</div>

<div>

<button type="button" id="replyModBtn">Modify</button>

<button type="button" id="replyDelBtn">DELETE</button>

<button type="button" id="closeBtn">Close</button>

</div>

</div>

<!-- 모달창.끝 -->

</body>

</html>

'TIS_2018 > 응용sw2018_1기' 카테고리의 다른 글

6/4 uploadAjax.jsp  (0) 2018.06.04
프로젝트문서  (0) 2018.05.31
프로젝트 팀 구성  (3) 2018.05.24
5/24 ex01  (0) 2018.05.24
스프링연습문제02  (0) 2018.05.23
'TIS_2018/응용sw2018_1기' Related Articles more
Comments