서버 Dara Call

Ajax나 JSON을 통해서 Server에 데이터를 요청하는 몇가지 방법을 정리함.

1. Ajax 이용해서 FileUpload

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.js"></script> <script src="/aop/resources/js/upload.js"></script> <script id="template" type="text/x-handlebars-template"> <li> <span class="mailbox-attachment-icon has-img"><img src="{{imgsrc}}" alt="Attachment"></span> <div class="mailbox-attachment-info"> <a href="{{getLink}}" class="mailbox-attachment-name">{{fileName}}</a> <a href="{{fullName}}" class="btn btn-default btn-xs pull-right delbtn"><i class="fa fa-fw fa-remove"></i></a> </div> </li> </script> <script type="text/javascript"> var template = Handlebars.compile($("#template").html()); $(".fileDrop").on("dragenter dragover", function(event){ event.preventDefault(); }); // Handlebars 안에 있는 클래스는 직접 제어가 안된다. 바깥에 있는 아이디나 클래스를 가지고 제어해야 한다. // 삽질 오래했다. // 여기선 uploadedList 클래스 $(".uploadedList").on("click","li a.delbtn", function(event){ event.preventDefault(); var that = $(this); var fullNmae = that.attr("href"); $.ajax({ url: "/aop/uploadTest/deleteFile", type: "post", data: {fileName:fullNmae}, dataType: "text", success:function(result) { if(result == "deleted") { that.parent("div").parent("li").remove(); } } }); }); $(".fileDrop").on("drop", function(event){ event.preventDefault(); var files = event.originalEvent.dataTransfer.files; var file = files[0]; var formData = new FormData(); formData.append("file", file); $.ajax({ url: '/aop/uploadTest/uploadAjax', data: formData, dataType : 'text', processData: false, contentType: false, type: 'POST', success: function(data) { var fileInfo = getFileInfo(data); var html = template(fileInfo); $(".uploadedList").append(html); } }); }); $("#registerForm").submit(function(event){ event.preventDefault(); alert('aa'); var that = $(this); var str = ""; $(".uploadedList .delbtn").each(function(index){ str += "<input type='hidden' name='files' value='" + $(this).attr('href') + "'>"; }); that.append(str); // get(0)은 순수한 DOM 객체를 얻어내기 위해서 사용한다. that.get(0).submit(); }); </script>

2. $.getJSON 이용하는 방법

$.getJSON("/sboard/getAttach/"+bno, function(list) { $(list).each(function(){ var fileInfo = getFileInfo(this); var html = template(fileInfo); $(".uploadList").append(html); }); });

3. Ajax 이용해서 데이터전송

$("#replyAddBtn").on("click", function(){ var replyerObj = $("#newReplyWriter"); var replytextObj = $("#newReplyText"); var replyer = replyerObj.val(); var replytext = replytextObj.val(); console.log("replyer=" + replyer + ", replytext= " + replytext); // 답변등록replytext $.ajax({ type:'post', url:'/aop/replies/', headers:{ "Content-Type" : "application/json", "X-HTTP-Method-Override" : "POST" }, dataType : 'text', data : JSON.stringify({bno:bno, replyer:replyer, replytext:replytext}), success:function(result) { console.log("result: " + result); if(result == 'SUCCESS') { alert('등록되었습니다'); replyPage = 1; getPage("/aop/replies/" + bno + "/" + replyPage); replyerObj.val(""); replytextObj.val(""); } } }); });