ajax의 jason,xml,text 출력 비교

jguest.jsp

<%@ page contentType="text/html; charset=UTF-8"%>

<%@page trimDirectiveWhitespaces="true"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%String cp = request.getContextPath();%>

*{margin: 0px; padding: 0px;}

body {font-size: 9pt; font-family: 돋움;}

td {font-size: 9pt;}

a{color: #000000;text-decoration: none;}

a:active, a:hover {text-decoration: underline;color: tomato;}

.boxTF { border:1px solid; height:15px; margin-top:3px; padding:2px 2px 2px 2px; border-color:#666666; background-color:#ffffff; font-family:"굴림"; font-size:9pt; }

.selectFiled {border:1px solid; border-color:#666666; background-color:#ffffff; font-family:굴림; font-size:9pt;}

.btn1 {font-size: 9pt; color:rgb(0,0,0); background-color:rgb(235,235,235); line-height:16px; padding:1px 3px 1px 3px;}

</style>

* json을 이용한 ajax

$(function(){ //$(function(){}은 jsp실행과 동시에 실행됨

listPage(1);

});

function listPage(page){

var url="<%=cp%>/jguest/list.action";

$.get(url,{pageNo:page, dumi:new Date()}, function(args){

printGuest(args);

},"json");

}

function sendGuest(){

var name=$("#name").val();

var content=$("#content").val();

name=$.trim(name);

content=$.trim(content);

if(!name){

alert("이름을 입력하세요");

$("#name").focus();

return;

}

if(!content){

alert("내용을 입력하세요");

$("#content").focus();

retrun;

}

var url="<%=cp%>/jguest/created.action";

var params="name="+name+"&content="+content;

$.ajax({

type:"post"

,url:url

,data:params

,dataType:"json"

,success:function(args){

printGuest(args);

}

,error:function(e){

alert(e.resposeText);

}

});

$("#name").val("");

$("#content").val("");

}

function printGuest(args){

var s="";

var dataCount=args.dataCount;

var pageNo=args.pageNo;

var pageIndexList=args.pageIndexList;

s="<table width='600'>";

for(var idx=0; idx<args.data.length; idx++){

var num=args.data[idx].num;

var name=args.data[idx].name;

var content=args.data[idx].content;

var created=args.data[idx].created;

s+="<tr height='3'><td colspan='2' bgcolor='#dbdbdb'></td></tr>";

s+="<tr height='25'>";

s+="<td align='left'>작성자 |"+name+"</td>";

s+="<td align='right'>"+created+" | <a onclick='deleteGuest(\""+num+"\",\""+pageNo+"\")'>삭제</a></td>";

s+="</tr>";

s+="<tr height='3'><td colspan='2' bgcolor='#dbdbdb'></td></tr>";

s+="<tr height='40'>";

s+="<td valign='top' colspan='2' align='left' style='padding-left: 10px'>"+content+"</td></tr>";

s+="</tr>";

}

s+="<tr height='3'><td colspan='2' bgcolor='#dbdbdb'></td></tr>";

s+="<tr height='25'>";

s+="<td valign='center' colspan='2'>";

if(dataCount==0)

s+="등록된 게시물이 없습니다.";

else

s+=pageIndexList;

s+="</td></tr>";

s+="</table>";

$("#listGuest").html(s);

listGuest.innerHTML=s;

}

</script>

</tr>

</table>

<br/>

</tr>

</td>

</tr>

</td>

</tr>

</tr>

</td>

</tr>

</table>

</center>

</div>

=================================================================================================================================================

GuestControlloer.java //jason에는 콘트로러에 제이슨 객체를 이용하여 데이터를 넘겨준다.

package com.sp.jguest;

import java.io.PrintWriter;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

import org.springframework.web.bind.annotation.RequestParam;

import com.sp.common.MyUtil;

@Controller("jguest.guestController")

public class GuestController {

@Autowired

private GuestService service;

@Autowired

private MyUtil myUtil;

@RequestMapping(value="/jguest/guest")

public String guest(){

return ".jguest.guest";

}

@RequestMapping(value="/jguest/list")

public void list(HttpServletResponse resp,

@RequestParam(value="pageNo",defaultValue="1") int current_page

)throws Exception{

int numPerPage=5;

int dataCount, total_page;

dataCount=service.dataCount();

total_page=myUtil.getPageCount(numPerPage, dataCount);

if(current_page>total_page)

current_page=total_page;

int start=(current_page-1)*numPerPage+1;

int end=current_page*numPerPage;

Map<String, Object> map=new HashMap<String, Object>();

map.put("start", start);

map.put("end", end);

List<Object> lists=service.listGuest(map);

String pageIndexList=myUtil.pageIndexList(current_page, total_page);

//JSON 데이터 작성

JSONObject ob=new JSONObject();

resp.setContentType("text/html;charset=utf-8");

//데이터 주입

ob.put("data",lists);

ob.put("pageIndexList",pageIndexList);

ob.put("pageNo",current_page);

ob.put("dataCount",dataCount);

PrintWriter out=resp.getWriter();

out.print(ob);

}

@RequestMapping(value="/jguest/created", method=RequestMethod.POST)

public void created(HttpServletResponse resp, Guest guest) throws Exception{

service.insertGuest(guest);

list(resp,1);

}

@RequestMapping(value="/jguest/delete",method=RequestMethod.GET)

public void delete(HttpServletResponse resp,int num,int pageNo)throws Exception{

service.deleteGuest(num);

list(resp,pageNo);

}

=================================================================================================================================================

tguest.jsp

<%@ page contentType="text/html; charset=UTF-8"%>

<%@page trimDirectiveWhitespaces="true"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%String cp = request.getContextPath();%>

*{margin: 0px; padding: 0px;}

body {font-size: 9pt; font-family: 돋움;}

td {font-size: 9pt;}

a{color: #000000;text-decoration: none;}

a:active, a:hover {text-decoration: underline;color: tomato;}

.boxTF { border:1px solid; height:15px; margin-top:3px; padding:2px 2px 2px 2px; border-color:#666666; background-color:#ffffff; font-family:"굴림"; font-size:9pt; }

.selectFiled {border:1px solid; border-color:#666666; background-color:#ffffff; font-family:굴림; font-size:9pt;}

.btn1 {font-size: 9pt; color:rgb(0,0,0); background-color:rgb(235,235,235); line-height:16px; padding:1px 3px 1px 3px;}

</style>

* text을 이용한 ajax

$(function(){

listPage(1);

});

function listPage(page){

var url="<%=cp%>/tguest/list.action";

$.get(url,{pageNo:page, dumi:new Date()}, function(args){

$("#listGuest").html(args);

});

}

function sendGuest(){

var name=$("#name").val();

var content=$("#content").val();

name=$.trim(name);

content=$.trim(content);

if(!name){

alert("이름을 입력하세요");

$("#name").focus();

return;

}

if(!content){

alert("내용을 입력하세요");

$("#content").focus();

retrun;

}

var url="<%=cp%>/tguest/created.action";

var params="name="+name+"&content="+content;

$.ajax({

type:"post"

,url:url

,data:params

,success:function(args){

$("#listGuest").html(args);

}

,error:function(e){

alert(e.resposeText);

}

});

$("#name").val("");

$("#content").val("");

}

</script>

</tr>

</table>

<br/>

</tr>

</td>

</tr>

</td>

</tr>

</tr>

</td>

</tr>

</table>

</center>

</div>

=================================================================================================================================================

list.jsp

<%@ page contentType="text/html; charset=UTF-8"%>

<%@page trimDirectiveWhitespaces="true"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%String cp = request.getContextPath();%>

<c:forEach var="dto" items="${lists }">

<td align="right">${dto.created } | <a onclick="deleteGuest('${dto.num}',${pageNo }');">삭제</a></td>

</tr>

<td valign="top" colspan="2" align="left">${dto.content }</td>

</tr>

</c:forEach>

<c:if test="${dataCount==0 }">

등록된 게시물이없습니다.

</c:if>

<c:if test="${dataCount!=0}">

${pageIndexList}

</c:if>

</td>

</tr>

</table>

=================================================================================================================================================

xguest.jsp

<%@ page contentType="text/html; charset=UTF-8"%>

<%@page trimDirectiveWhitespaces="true"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%String cp = request.getContextPath();%>

*{margin: 0px; padding: 0px;}

body {font-size: 9pt; font-family: 돋움;}

td {font-size: 9pt;}

a{color: #000000;text-decoration: none;}

a:active, a:hover {text-decoration: underline;color: tomato;}

.boxTF { border:1px solid; height:15px; margin-top:3px; padding:2px 2px 2px 2px; border-color:#666666; background-color:#ffffff; font-family:"굴림"; font-size:9pt; }

.selectFiled {border:1px solid; border-color:#666666; background-color:#ffffff; font-family:굴림; font-size:9pt;}

.btn1 {font-size: 9pt; color:rgb(0,0,0); background-color:rgb(235,235,235); line-height:16px; padding:1px 3px 1px 3px;}

</style>

* xml을 이용한 ajax

$(function(){ //$(function(){}은 jsp실행과 동시에 실행됨

listPage(1);

});

function listPage(page){

var url="<%=cp%>/xguest/list.action";

$.get(url,{pageNo:page, dumi:new Date()}, function(args){

printGuest(args);

},"xml");

}

function sendGuest(){

var name=$("#name").val();

var content=$("#content").val();

name=$.trim(name);

content=$.trim(content);

if(!name){

alert("이름을 입력하세요");

$("#name").focus();

return;

}

if(!content){

alert("내용을 입력하세요");

$("#content").focus();

retrun;

}

var url="<%=cp%>/xguest/created.action";

var params="name="+name+"&content="+content;

$.ajax({

type:"post"

,url:url

,data:params

,dataType:"xml"

,success:function(args){

printGuest(args);

}

,error:function(e){

alert(e.resposeText);

}

});

$("#name").val("");

$("#content").val("");

}

function printGuest(args){

var s="";

var dataCount=$(args).find("dataCount").text();

var pageNo=$(args).find("pageNo").text();

var pageIndexList=$(args).find("pageIndexList").text();

s="<table width='600'>";

$(args).find("record").each(function(){ // 향상된 for문장과 유사한 기능을 하는 each()

var num=$(this).attr("num");

//값(텍스트 가져오기)

var name=$(this).find("name").text();

var content=$(this).find("content").text();

var created=$(this).find("created").text();

s+="<tr height='3'><td colspan='2' bgcolor='#dbdbdb'></td></tr>";

s+="<tr height='25'>";

s+="<td align='left'>작성자 |"+name+"</td>";

s+="<td align='right'>"+created+" | <a onclick='deleteGuest(\""+num+"\",\""+pageNo+"\")'>삭제</a></td>";

s+="</tr>";

s+="<tr height='3'><td colspan='2' bgcolor='#dbdbdb'></td></tr>";

s+="<tr height='40'>";

s+="<td valign='top' colspan='2' align='left' style='padding-left: 10px'>"+content+"</td></tr>";

s+="</tr>";

});

s+="<tr height='3'><td colspan='2' bgcolor='#dbdbdb'></td></tr>";

s+="<tr height='25'>";

s+="<td valign='center' colspan='2'>";

if(dataCount==0)

s+="등록된 게시물이 없습니다.";

else

s+=pageIndexList;

s+="</td></tr>";

s+="</table>";

$("#listGuest").html(s);

listGuest.innerHTML=s;

}

</script>

</tr>

</table>

<br/>

</tr>

</td>

</tr>

</td>

</tr>

</tr>

</td>

</tr>

</table>

</center>

</div>

=================================================================================================================================================

list.jsp

<%@ page contentType="text/xml; charset=UTF-8"%>

<%@page trimDirectiveWhitespaces="true"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%String cp = request.getContextPath();%>

<root>

<dataCount>${dataCount}</dataCount>

<pageNo>${pageNo }</pageNo>

<c:forEach var="dto" items="${lists }">

<created>${dto.created}</created>

</record>

</c:forEach>

</root>

=================================================================================================================================================

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

'AJAX' 카테고리의 다른 글

jquery로 여러개 데이터 파싱하기 : each (0)	2014.03.27
ajax - jsonp(미투데이 jsonp로 json 데이터 가져오기) (0)	2014.02.12
AJAX 기본 예제3 POST (회원가입양식에서 바로 검증) (0)	2013.08.01
AJAX 기본 예제2 GET방식(예제1보다 심플) (0)	2013.08.01
AJAX 예제1 GET방식 (0)	2013.07.31

T없이맑은날

ajax의 jason,xml,text 출력 비교

'AJAX' 카테고리의 다른 글

티스토리툴바

ajax의 jason,xml,text 출력 비교

'AJAX' 카테고리의 다른 글

'AJAX' Related Articles

티스토리툴바