jQuery ajax (GET, POST type, success, error 처리등)

Programming/jQuery 2015. 12. 11. 14:55





반응형

Ajax를 jQuery를 이용해서 실행하게 되면 소스 코드가 많이 단축되며 기존의 경우 ajax 실행시

 

실행함수 & 응답함수 두가지를 만들어야 했으나 1개의 함수만으로 두가지를 전부 실행 헐 수 있다.

 

======================================== jQyuery Ajax Sample Get =============================================

function doDelete(id){
$.ajax({
type: "GET",
url: "./tset.jsp", //보낼 페이지
data: "id="+id, //변수가 여러개면 "id=ddd&name=프라임&age=22" 처럼 작성
dataType:"JSON",
success: function(result) {
alert("반영되었습니다."); //성공시 실행부분
},
error: function(result) {

alert("에러가 발생하였습니다."); //실패시 실행부분
}
});
}

 

======================================= jQyuery Ajax Sample Post ============================================

function doSave(){

$.ajax({
type: 'POST',
url: ($("#tran_status").val()=="U") ? "insert.jsp":"update.jsp", //특정 객체의 값에 따라 이동 페이지 결정

data: {
id:$("#id").val(), //원하는 객체의 값을 명칭을 매칭시킨다. 즉 name:value 식으로 전달 getParameter로 받을수 있다
name:$("#name").val(),
age:$("#age").val(),

point:($("#point").val()=="null") ? "0":$("#point").val() //조건에 따른 값 세팅도 가능
},
success: function(result) {
alert("반영되었습니다."); //성공시 실행부분
},
error: function(result) {

alert("에러가 발생하였습니다."); //실패시 실행부분
}
});

}

 

반응형
저작자표시 비영리 변경금지

'Programming > jQuery' 카테고리의 다른 글

jQuery Mobile을 이용한 List 더보기 구현  (0) 2015.12.11
jQuery 스크롤 페이징  (0) 2015.12.11



Posted by 궁극의 java개발자
,

jQuery Mobile을 이용한 List 더보기 구현

Programming/jQuery 2015. 12. 11. 14:53





반응형

ListView Main JSP(historyview.jsp)
<%
 String appCode = StringUtil.converNullToBlank(request.getParameter("appcode"));
 String userID = UniToKSC(StringUtil.converNullToBlank(request.getParameter("userid")));
 String deviceID = StringUtil.converNullToBlank(request.getParameter("deviceid"));
 NotiHistoryService service = new NotiHistoryService();
 List<NotiHistory> history = service.getHistory(appCode, userID, deviceID, 1, 15);
%>
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css"
 rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
 

<script>
       var nCount=1;
       var $listView;
       $(function()
       {         
           $("#btn_more").click(onAdd);
           $listView = $("#listView");
 
       });
     
       function onAdd(){
        nCount++;
        $.ajax({
         type: 'get',
         async: true,
         url: './morehistory.jsp?appcode=<%=appCode%>&userid=<%=userID%>&deviceid=<%=deviceID%>&page='+nCount+'&rowsize=15',
         success: function(data) {
          var response = data.trim();
          if(response == "") {
           alert('리스트가 더 없습니다.');
          } else {
              $(response).appendTo($listView);
              $("#listView").listview("refresh");           
          }
         },
         error: function(data, status, err) {
                   alert('서버와의 통신이 실패했습니다.');
            }
        });
         
       }
   </script>
 
</head>
 
<body>
 
 <div data-role="page" id="history">
  <div data-role="content">
   <ul data-role="listview"  id="listView">
    <%
     if (history != null && history.size() > 0) {
      for(NotiHistory h: history) {
    %>
    <li><a href="./notidetail.jsp?seq=<%=h.getSeq() %>" data-rel="dialog">
     <%=h.getMsgHeader()%><br>
     <%=h.getMsgBody()%><br>
     </a>
    </li>
    <%
      }
     } else {
    %>
     <li>전송된 알람이 아직 없습니다.</li>
    <%
     }
    %>
   </ul>
   <%
    if (history != null && history.size() > 0) {
   %>
   <br>
    <input type="button" data-icon="plus" id="btn_more" value="15개 더보기"/>
   <%
    }
   %>
  
  </div>
 </div>
</body>
</html>
 
morehistory.jsp
<%@page import="java.io.UnsupportedEncodingException"%>
<%@page import="com.hs.mobile.push.service.vo.NotiHistory"%>
<%@page import="java.util.List"%>
<%@page import="com.hs.commons.utils.StringUtil"%>
<%@page import="com.hs.mobile.push.service.NotiHistoryService"%>
<%@page import="java.util.ArrayList"%>
<%@page import="com.hs.mobile.push.service.CommonQueryService"%>
<%@ page language="java" contentType="text/html; charset=EUC-KR"
 pageEncoding="EUC-KR"%>
 
<%
 String appCode = StringUtil.converNullToBlank(request.getParameter("appcode"));
 String userID = StringUtil.UniToKSC(StringUtil.converNullToBlank(request.getParameter("userid")));
 String deviceID = StringUtil.converNullToBlank(request.getParameter("deviceid"));
 int nPage = StringUtil.sToi(request.getParameter("page"),1);
 int rowsize = StringUtil.sToi(request.getParameter("rowsize"),15);
 
 NotiHistoryService service = new NotiHistoryService();
 List<NotiHistory> history = service.getHistory(appCode, userID, deviceID, nPage, rowsize);
%>
<%
 if (history != null && history.size() > 0) {
  for(NotiHistory h: history) {
%>
<li><a href="./notidetail.jsp?seq=<%=h.getSeq() %>" data-rel="dialog">
  <%=h.getMsgHeader()%><br>
  <%=h.getMsgBody()%><br>
  </a>
 </li>
<%
  }
 }
%>

 

반응형
저작자표시 비영리 변경금지

'Programming > jQuery' 카테고리의 다른 글

jQuery ajax (GET, POST type, success, error 처리등)  (0) 2015.12.11
jQuery 스크롤 페이징  (0) 2015.12.11



Posted by 궁극의 java개발자
,

jQuery 스크롤 페이징

Programming/jQuery 2015. 12. 11. 14:50





반응형
mixsh나 twtkr등에서 스크를 마지막에 가면 자동으로 다음 글들을 불러 오게 하는 자료입니다.
JQUERY로 짜여졌고 간단합니다.

엄청나게 간단하네요....;;;

링크에 실제 배포하는 사이트 남겨 두었습니다.

샘플보기(스크롤해서 내려 보세요) :
http://www.webresourcesdepot.com/dnspinger/


구조설명:

컨텐츠 페이지 구조
<div class="wrdLatest" id=1>content</div>
<div class="wrdLatest" id=2>content</div>
<div id="lastPostsLoader"></div>

로딩중 이미지 보여주는 부분과 실제 데이터 가져오는 부분
function lastPostFunc()
{
$('div#lastPostsLoader').html('<img src="bigLoader.gif">');
$.post("scroll.asp?action=getLastPosts&lastID=" + $(".wrdLatest:last").attr("id"),


function(data){
if (data != "") {
$(".wrdLatest:last").after(data);
}
$('div#lastPostsLoader').empty();
});
};

스크롤 감지하는 부분
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
lastPostFunc();
}
});

 

반응형
저작자표시 비영리 변경금지

'Programming > jQuery' 카테고리의 다른 글

jQuery ajax (GET, POST type, success, error 처리등)  (0) 2015.12.11
jQuery Mobile을 이용한 List 더보기 구현  (0) 2015.12.11



Posted by 궁극의 java개발자
,

티스토리툴바