[Ajax] Ajax로 방명록 게시판 만들기

 

 

 

 

 

GuestDTO 생성

 

listNum 일련번호

pageNum 페이지 번호

그 외에는 DB 데이터

package com.iguest;

public class GuestDTO {
	
	private int listNum; // 일련번호
	
	private int num;
	private String name;
	private String email;
	private String content;
	private String ipAddr;  // 아이피는 db에 저장 클라이언트에 보여줄필요는없다. (누가접근했는지알기위해)
	private String created;
	
	private String pageNum; // 부수적으로 만듬

	public int getListNum() {
		return listNum;
	}

	public void setListNum(int listNum) {
		this.listNum = listNum;
	}

	public int getNum() {
		return num;
	}

	public void setNum(int num) {
		this.num = num;
	}


	public String getName() {
		return name;
	}


	public void setName(String name) {
		this.name = name;
	}


	public String getEmail() {
		return email;
	}


	public void setEmail(String email) {
		this.email = email;
	}


	public String getContent() {
		return content;
	}


	public void setContent(String content) {
		this.content = content;
	}


	public String getIpAddr() {
		return ipAddr;
	}


	public void setIpAddr(String ipAddr) {
		this.ipAddr = ipAddr;
	}


	public String getCreated() {
		return created;
	}


	public void setCreated(String created) {
		this.created = created;
	}


	public String getPageNum() {
		return pageNum;
	}


	public void setPageNum(String pageNum) {
		this.pageNum = pageNum;
	}
	
	
}

 

 

 

DAO역할을 하는 iguest_sqlMap.xml 생성

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE sqlMap
PUBLIC "-//ibatis.apache.org//DTD SQL Map 2.0//EN"
"http://ibatis.apache.org/dtd/sql-map-2.dtd">

<sqlMap namespace="iguest">
		
<select id="numMax" resultClass="int">
	select nvl(max(num),0) from iguest
</select>
	
<insert id="insertData" parameterClass="com.iguest.GuestDTO">
	insert into iguest (num,name,email,content,ipAddr,created)
	values (#num#,#name#,#email#,#content#,#ipAddr#,sysdate)
</insert>

<select id="dataCount" resultClass="int">
	select nvl(count(*),0) from iguest
</select>

<select id="listData" resultClass="com.iguest.GuestDTO" parameterClass="map" >
	select * from (
	select rownum rnum, data.* from (
	select num,name,email,content,ipAddr,created
	from iguest order by num desc) data)
<![CDATA[
	where rnum>=#start# and rnum<=#end#
]]>
</select>

<delete id="deleteData" parameterClass="int">
	delete iguest where num=#num#
</delete>

</sqlMap>

numMax : 게시물 번호 

insertData : 방명록 추가

dataCount : 게시물 개수

listData : 게시물 리스트 출력

deleteData : 게시물 삭제 

Action에서 namespace로 id에 접근한다.

 

 

 

추가한 sqlMap.xml은 sqlMapConfig.xml 에 등록한다. 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE sqlMapConfig
PUBLIC "-//ibatis.apache.org//DTD SQL Map Config 2.0//EN"
"http://ibatis.apache.org/dtd/sql-map-config-2.dtd">

<!-- cacheModelsEnabled : 캐쉬 사용하지말라   -->
<!-- useStatementNamespaces -> sqlMap.xml에서 namespace를 사용할수있다. -->
<!--  dataSource type : simple 단일테이터베이스 -->

<!--  property : 등록 
	sqlMap resource : boardTest_sqlMap.xml를 불러온다.  -->
<sqlMapConfig>
	<settings
	cacheModelsEnabled="false"
	useStatementNamespaces="true"/> 
	<transactionManager type="JDBC" commitRequired="false">
		<dataSource type="SIMPLE">
			<property name="JDBC.Driver"
				 value="oracle.jdbc.driver.OracleDriver"/>
			<property name="JDBC.ConnectionURL"
			 	value="jdbc:oracle:thin:@localhost:1521:xe"/>
			 <property name="JDBC.Username" value="suzi"/>
			 <property name="JDBC.Password" value="a123"/>	
		</dataSource>	
	</transactionManager>
	
	<!-- DAO 등록  -->
	<sqlMap resource="com/util/sqlMap/board_sqlMap.xml"/>
	<sqlMap resource="com/util/sqlMap/member_sqlMap.xml"/>
	<sqlMap resource="com/util/sqlMap/iguest_sqlMap.xml"/>
</sqlMapConfig>

<sqlMap resource="com/util/sqlMap/iguest_sqlMap.xml"/> 

등록했다.

 

Controller 역할을 하는  GuestAction 

// 스트럿츠2 에서는 ajax가 데이터를 넘겨주니까 dto가 안쓰고 ajax
public class GuestAction extends ActionSupport
	implements Preparable,ModelDriven<GuestDTO>{

	private static final long serialVersionUID = 1L;
	
	private GuestDTO dto;
	
	//데이터는 ajax가 넘기기때문에 이건 필요없당
	/* public GuestDTO getDto() {
        return dto;
    }*/

	@Override
	public GuestDTO getModel() {
		return dto;
	}

	@Override
	public void prepare() throws Exception {
		dto = new GuestDTO();
		
	}

ActionSupport를 상속받는다 (스트럿츠 2를 사용하기 위하여)

인터페이스 Preparable과 ModelDriver <GuestDTO>를 상속받는데 

 

Prepare() 메서드는 dto 객체를 생성해주고

ModelDriven<GuestDTO> 에서 dto를 대신 넘겨주는데 

 

getModel() 이 ModelDriven 한테 dto를 준다. 

 

여기 예제에서는 Ajax가 홈페이지에 데이터를 뿌려주니까 

getDto 를 만들어서 페이지에 데이터를 넘길필요가 없다 .

 

 

struts-iguest.xml 를 struts.xml에 등록해줘야한다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts
PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<!--  struts-default  : xml 파일을 불러옴  -->
<!--  include : 또 다른 환경설정을 불러옴 -->
<struts>
	<package name="default" extends="struts-default" namespace="">
		<global-results>
			<result name="error">/exception/error.jsp</result>
		</global-results>
	</package>
	
	<include file="struts-test.xml"/>
	<include file="struts-board.xml"/>
	<include file="struts-fileTest.xml"/>
	<include file="struts-member.xml"/>
	<include file="struts-iguest.xml"/>
</struts>

 

<include file="struts-iguest.xml"/> 를 등록한다. 

 

guest.jsp 

보여지는 html부분 

<body>

<br/><br/>
<table width="700" border="2" cellpadding="0" cellspacing="0"
 bordercolor="#e6d4a6" style="margin: auto;">
 	<tr height="40">
 		<span id="listData" style="display: none;"></span>	 <!--  none 안보임  -->
 		<!-- <td style="padding-left: 20px;"><b>방명록</b></td> -->
 	</tr>
</table>

	<!-- 겉모습 만듬  -->
	<br/><br/>
	
<table width="700" border="0" cellpadding="0" cellspacing="0" style="margin : auto;">
	
<tr>
<!-- colsplan 4칸합침 선  -->
	<td width="600" colspan="4" height="3" bgcolor="#e6d4a6"></td>
</tr>	

<tr>
	<td width="60" height="30" bgcolor="#eeeeee" align="center">작성자</td>
	<td width="240" height="30" style="padding-left: 10px;">
		<input type="text" id="name" size="35" maxlength="20" class="boxTF"/>
	</td>	

	<td width="60" height="30" bgcolor="#eeeeee" align="center">이메일</td>
	<td width="240" height="30" style="padding-left: 10px;">
		<input type="text" id="email" size="35" maxlength="50" class="boxTF"/>
	</td>	
</tr>
<tr>	
	<td width="600" colspan="4" height="1" bgcolor="#e6d4a6"></td>
</tr>	

<tr>
	<td width="60" height="30" bgcolor="#eeeeee" align="center">내용</td>
	<td width="540" colspan="3" style="padding-left: 10px;">
		<textarea rows="3" cols="90" class="boxTA"
		style="height: 50px;" id="content"></textarea>
	</td>	
</tr>
<tr>	
	<td width="600" colspan="4" height="1" bgcolor="#e6d4a6"></td>
</tr>	

<tr>
	<td width="600" colspan="4" height="30" align="right"
	style="padding-right: 15px;">
	<input type="button" value="등록하기" class="btn2" id="sendButton"/> <!-- 제이쿼리로 읽어내기 위해서 id  -->
	</td>
</tr>	
</table>		
<br/>
</body>
</html>

 

웹페이지를 열게되면

$(function() 이 실행하게 된다.

 

/* 웹페이지 열면 바로 실행  */
	$(function(){
			
		listPage(1); /* 1페이지를 호출한다.  function listPage(page) 호출  */	
	});

 

listPage(1)은  function listPage(page) 를 호출하게 된다. 

/* 페이징처리했을떄 보여주는 곳  */
	function listPage(page){ // 1 이 오게됨
		
		var url = "<%=cp%>/guest/list.action";
		
		/* jQury */
				/*post방식은 json - param*/
		$.post(url,{pageNum:page},function(args){  /* url로 가는데 pagenum 가지고 , page가지고   , 비동기함수  */ 
 											/* 잘갔다가 잘 실행하고 오면 args 로 옴 */
			$("#listData").html(args);
		});
		$("#listData").show(); /* display : none 을 보여주기 위해서 */
		
	}

 

jQuery 형식 데이터는 json 형식(Key,Value)

$.post(url,{pageNum:page}, function(args) {

          $("#listData").html(agrs);

});

 

post방식으로 url 경로로 매개변수로 받은 page를 pageNum의 value값으로 넘긴다.

 

 

GuestAction

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts
PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>
	<!-- http://localhost:8080/struts2/guest/guest.action -->
	<package name="iguest" extends="default" namespace="/guest">
		<!-- namespace는  /guest/list.action 으로 쓰겠다는 의미이다.  -->
		<action name="guest">
			<result>/iguest/guest.jsp</result> <!-- 위에는 create 창 insert 창이 떠야하므로 guest.jsp를 무조건 띄운다 -->
		</action>
		
		 <!-- 왜 다 list인가  데이터를 보내서 # 서버에서 내보낼떄 list가 떠야되므로  -->
		<action name="created" class="com.iguest.GuestAction" method="created">  <!-- created메소드 찾아라  -->
			<result>/iguest/list.jsp</result> 		
		 </action>
		
		<action name="list" class="com.iguest.GuestAction" method="list">  <!-- list메소드 찾아라  -->
			<result>/iguest/list.jsp</result> 		
		 </action>
		 
		 <action name="deleted" class="com.iguest.GuestAction" method="deleted">  <!-- deleted메소드 찾아라  -->
			<result>/iguest/list.jsp</result>			
		 </action>
	</package>
</struts>

/guest/list.action 으로 

<action name="list" class="com.iguest.GuestAction" method="list">  <!-- list메소드 찾아라  -->
         <result>/iguest/list.jsp</result> 
 </action>

 

list로 오게되면 GuestAction 으로 가서 list메소드를 실행하라는 뜻이다.

 

 

GuestAction 에서 list 메소드 

public String list() throws Exception{
		
		HttpServletRequest request = ServletActionContext.getRequest(); //request를 가져온것
		
		
		// 아이바티스
		CommonDAO dao = CommonDAOImpl.getInstance();
		
		
		MyUtil myUtil = new MyUtil(); // 페이징 처리를 하기 위해 객체 생성 
		
		int numPerPage = 3; //한 페이지에 표시할 데이터
		int totalPage = 0; //0으로 초기화
		int totalDataCount = 0; //마찬가지
		
		String pageNum = request.getParameter("pageNum"); // $.post(url,{pageNum:page},function(args) 페이지넘을 받아온것
		
		int currentPage = 1;
		
		if(pageNum!=null && !pageNum.equals("")) { //pageNum이 null이 아니면
			currentPage = Integer.parseInt(pageNum);  //currentPage(현재페이지)에 pageNum을 넣는것
		}
		
		totalDataCount = dao.getIntValue("iguest.dataCount"); // modelDriven이 움직여줌
		
		
		if(totalDataCount!=0) {
			totalPage = myUtil.getPageCount(numPerPage, totalDataCount);
		}
		
		if(currentPage>totalPage) { //현재페이지가 토탈페이지보다 크면 
			currentPage = totalPage;
		}
		
		Map<String, Object> hMap = new HashMap<String, Object>();
		
		
		// 시작끝 게시물시작 과 게시물끝  
		int start = (currentPage-1)*numPerPage+1;
		int end = currentPage*numPerPage;
		
		hMap.put("start", start); //hmap에 start와 end를 넣은것.
		hMap.put("end", end); 
		
		List<Object> lists = dao.getListData("iguest.listData", hMap);
		
		int listNum,n = 0; //일련번호
		
		Iterator<Object> it = lists.iterator(); 
		
		while(it.hasNext()) {//it의 값이 없을때까지 반복문
			
			GuestDTO vo = (GuestDTO)it.next();
			
			listNum = totalDataCount-(start+n-1); //일렬번호 구하는 공식
			vo.setListNum(listNum);
			vo.setContent(vo.getContent().replaceAll("\n", "<br/>")); //줄바꿈(엔터)를 <br/> 줄바꿈으로 바꾸고 다시 set하는것
			n++; // 0 , 1 , 2  일련번호 증가 
		
		}
		
		// 1 ,2 , 3, 
		String pageIndexList = myUtil.pageIndexList(currentPage, totalPage);
		request.setAttribute("lists", lists); //lists를 넘김
		request.setAttribute("pageIndexList", pageIndexList);//pageIndexList을 넘김
		request.setAttribute("totalDataCount", totalDataCount);//totalDataCount을 넘김
		request.setAttribute("pageNum", currentPage); //pageNum을 넘김
		
		return SUCCESS; //리다이렉트가 필요없으므로 SUCCESS를 가져감 SUCCESS는 list.jsp 실행
	}

 

HttpServletRequest request = ServletActionContext.getRequest();  

request 를 사용하기 위해서 객체 생성

 

CommonDAO dao = CommonDAOImpl.getInstance();

아이바티스 사용하여 db연결객체 dao 생성

 

MyUtil myUtil = new MyUtil();

페이징 처리를 하기 위한 객체 myUtil 생성

 

String pageNum = request.getParameter("pageNum");

guest.jsp에서  $.post(url,{pageNum:page} 넘어온 pageNum을 받았다.

 

전체데이터개수 구하기

totalDataCount = dao.getIntValue("iguest.dataCount");

 

modelDriven이 dto를 넘겨주는데

namespace가 iguest 이고 select id 가 dataCount를 찾는다.

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE sqlMap
PUBLIC "-//ibatis.apache.org//DTD SQL Map 2.0//EN"
"http://ibatis.apache.org/dtd/sql-map-2.dtd">

<sqlMap namespace="iguest">

<select id="dataCount" resultClass="int">
	select nvl(count(*),0) from iguest
</select>

 

Query문을 가지고  dao.getIntValue 작업을 하게되고 반환값 int형인  totalDataCount 구하게 된다. (resultClass)

 

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

hashMap 생성 , 게시물 num 시작과 끝을 넣기 위한 컬렉션

 

현재 페이지 3  한페이지에 보여지는 페이지개수 5

int start = (currentPage-1)*numPerPage+1;  3-1 * 5+1 = 12번게시물  
int end = currentPage*numPerPage;  3*5 = 15번 게시물 

 

12(현재페이지)  ,13 ,14 ,15번게시물 끝

 

List<Object> lists = dao.getListData("iguest.listData", hMap);

 

<select id="listData" resultClass="com.iguest.GuestDTO" parameterClass="map" >
	select * from (
	select rownum rnum, data.* from (
	select num,name,email,content,ipAddr,created
	from iguest order by num desc) data)
<![CDATA[
	where rnum>=#start# and rnum<=#end#
]]>
</select>

rnum 이 그러면  rnum >= 12 and rnum <= 15 가 오게 된다.

 

int listNum,n = 0; 일련번호를 저장하기 위한 변수 선언

 

Iterator<Object> it = lists.iterator();  반복작업을 한다. 
while(it.hasNext()) {//it의 값이 없을때까지 반복문

GuestDTO vo = (GuestDTO)it.next();

 

// 일련번호 구하는 공식
listNum = totalDataCount-(start+n-1);   25개 - (5+0-1) = 21

                                                    25개 - (5+1-1); = 20

                                                    25개 - (5+2-1); = 19 

vo.setListNum(listNum);
vo.setContent(vo.getContent().replaceAll("\n", "<br/>")); //줄바꿈(엔터)를 <br/> 줄바꿈으로 바꾸고 다시 set하는것
n++; // 0 , 1 , 2  일련번호 증가 

}

 

String pageIndexList = myUtil.pageIndexList(currentPage, totalPage);

 

페이징 처리를 하기 위한 

MyUtil  

 

자바스크립트로 페이징 처리 하기 

listUrl이 필요없다.  

// 자바스크립트로 페이징 처리 하기 
	// listUrl이 필요없다.
	public String pageIndexList(int currentPage, int totalPage ) {
		
		int numPerBlock =  5;
		int currentPageSetup;
		
		int page;
		String strList = "";
		
		if(currentPage==0) {
			return "";
		}
		
		//표시할 첫 페이지
		// 이전페이지 구함 
		currentPageSetup = (currentPage/numPerBlock) * numPerBlock;
		
		// 5 % 5 == 0
		if(currentPage % numPerBlock == 0) {
			currentPageSetup = currentPageSetup - numPerBlock;
		}
		
		// ◀ 이전 
		if(totalPage > numPerBlock && currentPageSetup>0) {
			strList = "<a onclick='listPage(" + currentPageSetup + ");'>◀이전</a>&nbsp;";
		}
		
		// 페이지
		page = currentPageSetup + 1;
		while((page<=totalPage) && (page<=currentPageSetup + numPerBlock)) {
			
			if(page==currentPage) {
				strList += "<font color='Fuchsia'>" + page + "</font>&nbsp;";
			} else {
				// 모든 페이지작업을 list한테 넘긴다.
				strList += "<a onclick='listPage(" + page +");'>" +
						page +"</a>&nbsp;";
			}
			page++;
		}
		// 다음 ▶
		if(totalPage-currentPageSetup>numPerBlock) {
			strList = "<a onclick='listPage(" + page + ");'>다음▶</a>&nbsp;";
		}
		return strList;
	}

 

request.setAttribute("lists", lists); //lists를 넘김
request.setAttribute("pageIndexList", pageIndexList);//pageIndexList을 넘김
request.setAttribute("totalDataCount", totalDataCount);//totalDataCount을 넘김
request.setAttribute("pageNum", currentPage); // pageNum에 currentPage

return SUCCESS;

메소드 호출할 필요가 없다. ( 페이징처리를 해줘야하므로 )

리다이렉트할 필요도 없으므로 SUCCESS는 무조건  list.jsp 실행한다. 

무조건 return 값을 줘야하므로 SUCCESS 

return SUCCESS  

 

 

list.jsp 로 가게 되면 

<%@ page contentType="text/html; charset=UTF-8"%> <%@ taglib prefix="c"
uri="http://java.sun.com/jsp/jstl/core"%> <%
request.setCharacterEncoding("UTF-8"); String cp = request.getContextPath(); %>

<c:if test="${totalDataCount!=0 }">
  <table
    width="700"
    border="0"
    cellpadding="0"
    cellspacing="0"
    style="margin: auto">
    <c:forEach var="dto" items="${lists }">
      <tr>
        <td colspan="2" bgcolor="#999999" height="1"></td>
      </tr>

      <tr height="30" bgcolor="#dbdbdb">
        <td width="300" style="padding-left: 10px">
          <!--  일련 번호  -->
          <b
            >No ${dto.listNum }.&nbsp;&nbsp;${dto.name } (<a
              href="mailto:${dto.email }"
              >${dto.email }</a
            >)</b
          >
        </td>
        <td width="300" align="right" style="padding-right: 10px">
          ${dto.created }&nbsp;
 
          <!-- guest.jsp 의 deleteData호출 , pageNum은 setAttribute넘어옴 -->
          <a href="javascript:deleteData('${dto.num }','${pageNum }');">삭제</a>
 							<!-- 15 ,1   -->
        </td>
      </tr>
      <tr>
        <td height="50" style="padding-left: 10px" colspan="2">
          ${dto.content }
        </td>
      </tr>
    </c:forEach>

    <tr>
      <td colspan="2" bgcolor="#dbdbdb" headers="2"></td>
    </tr>
    <tr height="30">
      <td align="center" colspan="2">${pageIndexList }</td> <!--  페이지번호  -->
    </tr>
  </table>
</c:if>

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

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

${dto.name}

 

 

<a href="javascript:deleteData('${dto.num }','${pageNum }');">삭제</a>

 

삭제 버튼을 누르면 하이퍼링크로 연결되는데

"javascript:deleteDate(dto.num,pageNum) 이 실행된다.

 

guest.jsp 에서 deleteData(num,page) 메소드가 실행된다.

/* 삭제햇을때 보여주는 곳 */
	function deleteData(num,page){
		
		var url = "<%=cp%>/guest/deleted.action";
		
		$.post(url,{num:num,pageNum:page},function(args){
			$("#listData").html(args);
		});	
	}

 

 

 

struts-iguest.xml 

<struts>
	<package name="iguest" extends="default" namespace="/guest">
    
	<action name="deleted" class="com.iguest.GuestAction" method="deleted">  <!-- deleted메소드 찾아라  -->
		<result>/iguest/list.jsp</result>			
	</action>

</struts>

 

/guest/deleted.action 이 오게 되면 GuestAction으로 이동시키며 deleted메소드를 찾는다.

 

public String deleted() throws Exception{
		HttpServletRequest request = ServletActionContext.getRequest(); //request를 가져온것
		CommonDAO dao = CommonDAOImpl.getInstance();
		int num = Integer.parseInt(request.getParameter("num"));
		dao.deleteData("iguest.deleteData", num);
		return list(); //삭제하고 리다이렉트(새로고침)가 되면 안‰?그러므로 다시 list로 직접가게끔
	}

넘어온 dto.num를 받는다. 

int num = Integer.parseInt(request.getParameter("num"));

dao.deleteData("iguest.deleteData",num);

 

 

/guest/deleted 경로에  num 과 pageNum 데이터를 넘긴다. 

 

 

<sqlMap namespace="iguest">

<delete id="deleteData" parameterClass="int">
	delete iguest where num=#num#
</delete>

where num = 넘어온num  삭제쿼리문 실행 

 

 

return list()를 호출시킨다. 

 

왜 SUCCESS 를 안했나? 

DB작업을 하고 나면 리다이렉트를 해줘야함.. Ajax로 데이터를 넘기면 리다이렉트 새로고침을 하면 안된다

 

바로 list() 메소드를 호출시킨다.

 

$(document).ready(function(){
			
		// 제이쿼리 id=sendButton누를시 실행 
		$("#sendButton").click(function() { 
			
			var params = "name=" + $("#name").val()
					    + "&email=" + $("#email").val()
					    + "&content=" + $("#content").val();

 

웹 페이지를 열면 바로 실행

$(function) {  }); 과  $(document).ready(function()  같은 의미

 

등록하기 누를시 id = "sendButton" 

제이쿼리는 id로 접근하므로 id로 줌 

 

$("#sendButton") 클릭시 함수 호출

 

id로 된 이름 이메일 내용  name , email , content 의 내용들을 params 변수에 넣는다

  

 

$.ajax 사용 

// ajax 사용
		$.ajax({
			
			type:"POST",
			/* 가상의 주소를 적어줌 */
			url:"<%=cp%>/guest/created.action", 
			data:params,
			
			success:function(args) { /* 함수성공하면 데이터는 args로 들어옴  그러면 listData에 뿌려줘야함*/ 
				
				$("#listData").html(args);

				/* null로 바꿔줘야지 데이터가 지워진다.  */
				/* 아작스는 새로고침이 안되기 때문에  */
				/* 코딩으로 삭제해줘야한다. */
				$("#name").val("");
				$("#email").val("");
				$("#content").val("");
				$("#name").focus();
			},
			
			// 위에 ajax로 보내기전에
			// 먼저 데이터 유효성검사를 실행한다.
			
			beforeSend:showRequest, // false가 오면 실행안됨 true가 와야 실행된다.
			
			//갔다와서 에러가 나면
			error:function(e) {
				alert(e.responseText);
			
				}
			});
		});
	});		
	
	/* 작성한 값을 한번더 거쳐줌   */
	
	function showRequest() {
		/* 제이쿼리 함수 양쪽의 공백을 제거  */
		var name = $.trim($("#name").val()); // name의 값을 양쪽공백 제거후 name에 넣음 		
		var email = $.trim($("#email").val()); // name의 값을 양쪽공백 제거후 name에 넣음 		
		var content = $.trim($("#content").val()); // name의 값을 양쪽공백 제거후 name에 넣음 		
		
		if(!name) {
			alert("\n이름을 입력하세요");
			$("#name").focus();
			return false;
		}
		
		
		if(!email) {
			alert("\n이메일을 입력하세요");
			$("#email").focus();
			return false;
		}
		
		if(!content) {
			alert("\n내용을 입력하세요");
			$("#content").focus();
			return false;
		}
		
		if(content.length>=200) {
			alert("\n내용은 200자 까지만 가능합니다.");
			$("#content").focus();
			return false;
		}
		
		// 다 체크해서 통과했으면 true가 돌아가야지 계속 실행됨 
		return true; 
	}

ajax 사용 

 

type:"POST" ,  POST방식으로

url :"<%=cp%>/guest/created.action",  경로

data :  params   넘길 데이터 

 

데이터를 넘기기전 

beforeSend : showRequest, 호출

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

name,email,content 값을 가져와서 양쪽공백을 제거한다.

 

유효성 검사를 하고나서 

체크가 다 됬으면  return true 를 준다

 

<action name="created" class="com.iguest.GuestAction" method="created">  <!-- created메소드 찾아라  -->
	<result>/iguest/list.jsp</result> 		
 </action>

created.action 으로 넘어옴  GuestAction 으로 보내서 created메소드를 찾는다

 

 

public String created() throws Exception{
		
		HttpServletRequest request = ServletActionContext.getRequest(); //request를 가져온것
		
		CommonDAO dao = CommonDAOImpl.getInstance();
		
		int numMax = dao.getIntValue("iguest.numMax"); //iguest sqlMap에 만들어둔 numMax
		
		dto.setNum(numMax + 1);
		dto.setIpAddr(request.getRemoteAddr()); //ip주소 자동으로 받아옴
		
		dao.insertData("iguest.insertData", dto); //db에 입력 iguest sqlMap insertData
		
		return list(); //list를 리다이렉트(새로고침) 하면 안되므로 list라는 메소드로 직접 찾아가게한다.
	}

<insert id="insertData" parameterClass="com.iguest.GuestDTO">
	insert into iguest (num,name,email,content,ipAddr,created)
	values (#num#,#name#,#email#,#content#,#ipAddr#,sysdate)
</insert>

 

 

 

 

 

true -> success  성공했으므로

 

success:function(args) { /* 함수성공하면 데이터는 args로 들어옴  그러면 listData에 뿌려줘야함*/ 
				
				$("#listData").html(args);

				/* null로 바꿔줘야지 데이터가 지워진다.  */
				/* 아작스는 새로고침이 안되기 때문에  */
				/* 코딩으로 삭제해줘야한다. */
				$("#name").val("");
				$("#email").val("");
				$("#content").val("");
				$("#name").focus();
			},

 

 

error 

실패했으면

 

error:function(e) {
				alert(e.responseText);
			
				}
			});