본문 바로가기
SPRING

230308_AJAX

by 경 훈 2023. 3. 8. 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<header>
<h1 align="center">
스프링 예제 프로그램
</h1>
</header>
</header>
<nav class="navbar navbar-inverse">
	<div class="container-fluid">
	<div class="navbar-header">
		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>                        
		</button>
	<a class="navbar-brand" href="/kim12_001/">HOME</a>
	</div>
	<div class="collapse navbar-collapse" id="myNavbar">
	<ul class="nav navbar-nav">
		<li class="active">
		</li>
		<li class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#">근무자료<span class="caret"></span></a>
			<ul class="dropdown-menu">
				<li><a href="in">근무입력</a></li>
				<li><a href="out">근무출력</a></li>
			</ul>
		</li>
		<li class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#">AjaxTest<span class="caret"></span></a>
			<ul class="dropdown-menu">
				<li><a href="ajaxinput">Ajax입력</a></li>
				<li><a href="ajaxinput2">Ajax입력2</a></li>
			</ul>
		</li>
	</ul>
	<ul class="nav navbar-nav navbar-right">
		<li><a href="mem"><span class="glyphicon glyphicon-user"></span>회원가입</a></li>
		<li><a href="login"><span class="glyphicon glyphicon-log-in"></span>로그인</a></li>
	</ul>
	</div>
	</div>
</nav>
</html>

 

<%@ 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>
</head>
<body>
	<h3 align="center">입력</h3>
	<form action="save">
		<table border="1" align="center">
			<tr>
				<th>이름</th>
				<td><input type="text" name="name"></td>
			</tr>
			<tr>
				<th>나이</th>
				<td><input type="text" name="age"></td>
			</tr>
			<tr>
				<th>근무년수</th>
				<td><input type="text" name="workyear"></td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<input type="submit" value="전송">
					<input type="reset" value="리셋">
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h3 align="center">출력</h3>
	<table border="1" align="center" width="600px">
		<tr>
			<th>이름</th><th>나이</th><th>근무년수</th>
			<th>근무수당</th>
		</tr>
		<c:forEach items="${list}" var="list">
		<tr>
			<td>${list.name}</td><td>${list.age}</td><td>${list.workyear}</td>
			<td><fmt:formatNumber value="${list.worksudang}" pattern="#,##0"/></td>
		</tr>
		</c:forEach>
	</table>
</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="//code.jauery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code,jwuery.com/ui/1.12.1/jquery-ui.js"></script>
<meta charset="UTF-8">
<script type="text/javascript">
	$(function() {
		$("#button1").click(function() {
			var id=$("#id").val();
			var pw=$("#pw").val();
			var name=$("#name").val();
			var tel=$("#tel").val();
			var sam = {"id":id,"pw":pw,"name":name,"tel":tel};
			var sam = JSON.stringify(sam);
			$.ajax({
				type:"post",
				async:true,
				url:"send1",
				data:{json1:sam},
				success:function() {
					alert("전송성공!!")
				},
				error:function() {
					alert("전송실패!!")
				}
			});
		});
		//취소버튼의 기능
		$("#reset1").click(function() {
			$("#id").val('');
			$("#pw").val('');
			$("#name").val('');
			$("#tel").val('');
		});
		$("#out2").click(function() {
			$.ajax({
				type:"post",
				dataType:"json",
				url:"out2",
				success:function(data) { //out2에서 실행한 결과가 data에 저장
					var htm ="<table border='1' align='center'>";
						htm+="<tr>";
						htm+="<th>아이디</th><th>패스워드</th><th>이름</th><th>전화번호</th>";
						htm+="</tr>";
						for(var i in data) {
							htm+="<tr>";
							htm+="<td>"+data[i].id+"</td>";
							htm+="<td>"+data[i].pw+"</td>";
							htm+="<td>"+data[i].name+"</td>";
							htm+="<td>"+data[i].tel+"</td>";
							htm+="</tr>";
						}
						$("#out").html(htm);
				},
				error:function() {
					alert("불러오기 실패!!")
				}
			})
		});
		$("#idcheck").click(function() {
			var id=$("#id").val();
			var sam = {"id":id};
			var sam = JSON.stringify(sam);
			var cnt;
			$.ajax({
				url:"idcheck",
				type:"post",
				async: true,
				data:{json2:sam},
				success:function(cnt) {
					cnt=JSON.parse(cnt);
					if(cnt == 0) {
						alert("사용가능한 아이디입니다.")
					}
					else {
						alert("중복된 아이디")
					}
				},
				error:function(e) {
					alert("전송실패!!")
				}
			});
		});
	});
</script>
<title>Insert title here</title>
</head>
<body>
	<form action="" method="post">
		<table border="1" align="center">
			<tr>
				<th>아이디</th>
				<td><input type="text" name="id" id="id"><input type="button" id="idcheck" value="ID중복검사"></td>
			</tr>
			<tr>
				<th>패스워드</th>
				<td><input type="text" name="pw" id="pw"></td>
			</tr>
			<tr>
				<th>이름</th>
				<td><input type="text" name="name" id="name"></td>
			</tr>
			<tr>
				<th>전화번호</th>
				<td><input type="text" name="tel" id="tel"></td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<input type="button" id="button1" value="전송">
					<input type="button" id="reset1" value="취소">
					<input type="button" id="out2" value="불러오기">
				</td>
			</tr>
		</table>
	</form>
	<div id="out"></div>
</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="//code.jauery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code,jwuery.com/ui/1.12.1/jquery-ui.js"></script>
<meta charset="UTF-8">
<script type="text/javascript">
	$(function() {
		$("#button1").click(function() {
			var name = $("#name").val();
			var kor = $("#kor").val();
			var eng = $("#eng").val();
			var mat = $("#mat").val();
			var sam = {"name":name,"kor":kor,"eng":eng,"mat":mat};
			var sam = JSON.stringify(sam);
			$.ajax({
				type:"post",
				async:true,
				url:"send2",
				data:{json3:sam},
				success:function() {
					alert("전송성공!!")
				},
				error:function() {
					alert("전송실패!!")
				}
			});
		});
		$("#reset1").click(function() {
			$("#name").val('');
			$("#kor").val('');
			$("#eng").val('');
			$("#mat").val('');
		});
		$("#out2").click(function() {
			$.ajax({
				type:"post",
				dataType:"json",
				url:"out3",
				success:function(data) {
					var htm = "<table border='1' align='center'>";
						htm+= "<tr>";
						htm+= "<th>이름</th><th>국어</th><th>영어</th><th>수학</th>";
						htm+= "</tr>";
						for(var i in data) {
							htm+="<tr>";
							htm+="<td>"+data[i].name+"</td>";
							htm+="<td>"+data[i].kor+"</td>";
							htm+="<td>"+data[i].eng+"</td>";
							htm+="<td>"+data[i].mat+"</td>";
							htm+="</tr>";
						}
						$("#out").html(htm);
				},
				error:function() {
					alert("불러오기 실패!")
				}
			});
		});
	});
</script>
<title>Insert title here</title>
</head>
<body>
	<form action="" method="post">
		<table border="1" align="center">
			<tr>
				<th>이름</th>
				<td><input type="text" name="name" id="name"></td>
			</tr>
			<tr>
				<th>국어</th>
				<td><input type="text" name="kor" id="kor"></td>
			</tr>
			<tr>
				<th>영어</th>
				<td><input type="text" name="eng" id="eng"></td>
			</tr>
			<tr>
				<th>수학</th>
				<td><input type="text" name="mat" id="mat"></td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<input type="button" id="button1" value="전송">
					<input type="button" id="reset1" value="취소">
					<input type="button" id="out2" value="불러오기">
				</td>
			</tr>
		</table>
	</form>
	<div id="out"></div>
</body>
</html>

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration 2.0//EN"
"http://tiles.apache.org/dtds/tiles-config_2_0.dtd">
<tiles-definitions>
	<definition name="baseLayout" template="/WEB-INF/views/layout.jsp">
		<put-attribute name="title" value=""/>
		<put-attribute name="top" value="/WEB-INF/views/top.jsp"/>
		<put-attribute name="body" value=""/>
		<put-attribute name="footer" value="/WEB-INF/views/footer.jsp"/>
	</definition>	   
	<definition name="main" extends="baseLayout">
		<put-attribute name="title" value="메인화면"/>
		<put-attribute name="body" value="/WEB-INF/views/main.jsp"/>
	</definition>  
	<definition name="input" extends="baseLayout">
		<put-attribute name="title" value="입력폼"/>
		<put-attribute name="body" value="/WEB-INF/views/input.jsp"/>
	</definition>  
	<definition name="output" extends="baseLayout">
		<put-attribute name="title" value="출력폼"/>
		<put-attribute name="body" value="/WEB-INF/views/output.jsp"/>
	</definition>  
	<definition name="ajaxinput" extends="baseLayout">
		<put-attribute name="title" value="A입력폼"/>
		<put-attribute name="body" value="/WEB-INF/views/ajaxinput.jsp"/>
	</definition>  
		<definition name="ajaxinput2" extends="baseLayout">
		<put-attribute name="title" value="A입력폼2"/>
		<put-attribute name="body" value="/WEB-INF/views/ajaxinput2.jsp"/>
	</definition>  
</tiles-definitions>
package com.ezen.kim12_001.work;

public class WorkDTO {
	String name;
	int age,workyear,worksudang;
	public WorkDTO() {
	}
	public WorkDTO(String name, int age, int workyear, int worksudang) {
		super();
		this.name = name;
		this.age = age;
		this.workyear = workyear;
		this.worksudang = worksudang;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	public int getWorkyear() {
		return workyear;
	}
	public void setWorkyear(int workyear) {
		this.workyear = workyear;
	}
	public int getWorksudang() {
		return worksudang;
	}
	public void setWorksudang(int worksudang) {
		this.worksudang = worksudang;
	}
}

 

package com.ezen.kim12_001.work;

import java.util.ArrayList;

public interface Service1 {
	public void insert(String name,int age,int workyear);
	public ArrayList<WorkDTO> out();
}

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
    PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
    "https://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.ezen.kim12_001.work.Service1">
	<insert id="insert">
		insert into db03081 values (#{param1},#{param2},#{param3})
	</insert>
	<select id="out" resultType="com.ezen.kim12_001.work.WorkDTO">
		select name,age,workyear,
				(decode(trunc(workyear/5),
                                0,2000000,
                                1,3000000,
                                2,4000000,
                                5000000)) as worksudang from db03081
	</select>
</mapper>

 

package com.ezen.kim12_001.work;


import java.util.ArrayList;

import javax.servlet.http.HttpServletRequest;

import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class WorkController {
	
	@Autowired
	SqlSession sqlsession;
	
	@RequestMapping(value="/in")
	public String ko1() {
		return "input";
	}
	@RequestMapping(value="/save")
	public String ko2(HttpServletRequest request) {
		String name = request.getParameter("name");
		int age = Integer.parseInt(request.getParameter("age"));
		int workyear = Integer.parseInt(request.getParameter("workyear"));
		Service1 ss1 = sqlsession.getMapper(Service1.class);
		ss1.insert(name,age,workyear);
		return "redirect:in";
	}
	@RequestMapping(value="/out")
	public String ko3(Model mo) {
		Service1 ss1 = sqlsession.getMapper(Service1.class);
		ArrayList<WorkDTO> list= ss1.out();
		mo.addAttribute("list", list);
		return "output";
	}
}
package com.ezen.kim12_001.ajax;

public class AjaxDTO {
	String id,pw,name,tel;

	public AjaxDTO() {
	}
	public AjaxDTO(String id, String pw, String name, String tel) {
		super();
		this.id = id;
		this.pw = pw;
		this.name = name;
		this.tel = tel;
	}
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getPw() {
		return pw;
	}
	public void setPw(String pw) {
		this.pw = pw;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String gettel() {
		return tel;
	}
	public void settel(String tel) {
		this.tel = tel;
	}
}

 

package com.ezen.kim12_001.ajax;

public class AjaxDTO2 {
	String name;
	int kor,eng,mat;
	public AjaxDTO2() {
	}
	public AjaxDTO2(String name, int kor, int eng, int mat) {
		super();
		this.name = name;
		this.kor = kor;
		this.eng = eng;
		this.mat = mat;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getKor() {
		return kor;
	}
	public void setKor(int kor) {
		this.kor = kor;
	}
	public int getEng() {
		return eng;
	}
	public void setEng(int eng) {
		this.eng = eng;
	}
	public int getMat() {
		return mat;
	}
	public void setMat(int mat) {
		this.mat = mat;
	}
}

 

package com.ezen.kim12_001.ajax;

import java.util.ArrayList;

public interface Service2 {
	public void insert(String id,String pw,String name,String tel);
	public ArrayList<AjaxDTO> out();
	public String idcheck(String id);
	public void insert2(String name,int kor,int eng,int mat);
	public ArrayList<AjaxDTO2> out2();
}

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
    PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
    "https://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.ezen.kim12_001.ajax.Service2">
	<insert id="insert">
		insert into ajax308 values (#{param1},#{param2},#{param3},#{param4})
	</insert>
	<select id="out" resultType="com.ezen.kim12_001.ajax.AjaxDTO">
		select * from ajax308
	</select>
	<select id="idcheck" resultType="String">
		select count(*) from ajax308 where id=#{param1}
	</select>
	<insert id="insert2">
		insert into db03082 values (#{param1},#{param2},#{param3},#{param4})
	</insert>
	<select id="out2" resultType="com.ezen.kim12_001.ajax.AjaxDTO2">
		select * from db03082
	</select>
</mapper>

 

package com.ezen.kim12_001.ajax;


import java.util.ArrayList;

import javax.servlet.http.HttpServletRequest;

import org.apache.ibatis.session.SqlSession;
import org.json.simple.JSONArray;
import org.json.simple.JSONObject;
import org.json.simple.parser.JSONParser;
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.ResponseBody;

@Controller
public class AjaxController {
	@Autowired
	SqlSession sqlsession;
	@RequestMapping(value="/ajaxinput")
	public String ko1() {
		return "ajaxinput";
	}
	@RequestMapping(value="/send1")
	public String ko2(HttpServletRequest request) {
		String json1 = request.getParameter("json1");
		//json1 객체는 json 타입으로 자료가 묶여있어서
		JSONParser jp = new JSONParser();
		try {
			JSONObject joj;
			joj = (JSONObject)jp.parse(json1);
			String id = (String)joj.get("id");
			String pw = (String)joj.get("pw");
			String name = (String)joj.get("name");
			String tel = (String)joj.get("tel");
			Service2 ss2 = sqlsession.getMapper(Service2.class);
			ss2.insert(id,pw,name,tel);
		}
		catch (Exception e) {
			e.printStackTrace();
		}
		return "redirect:ajaxinput";
	}
	@ResponseBody
	@RequestMapping(value="/out2",method = RequestMethod.POST,produces = "application/text;charset=UTF-8")
	public String ko3() {
		Service2 ss2 = sqlsession.getMapper(Service2.class);
		ArrayList<AjaxDTO> list = ss2.out();
		//list의 자료들을 json 객체화
		JSONArray array = new JSONArray();
		JSONObject total = new JSONObject();
		for(int i=0;i<list.size();i++) {
			JSONObject member = new JSONObject();
			String id = list.get(i).getId();
			String pw = list.get(i).getPw();
			String name = list.get(i).getName();
			String tel = list.get(i).gettel();
			member.put("id", id);
			member.put("pw", pw);
			member.put("name", name);
			member.put("tel", tel);
			array.add(member);
		}
		total.put("members", array);
		String jsoninfo = array.toJSONString();
		return jsoninfo;
	}
	@ResponseBody
	@RequestMapping(value="/idcheck",method = RequestMethod.POST)
	public String ko4(HttpServletRequest request) {
		String json2 = request.getParameter("json2");
		JSONParser jp = new JSONParser();
		JSONObject joj;
		String cnt = null;
		try {
			joj = (JSONObject)jp.parse(json2);
			String id = (String)joj.get("id");
			Service2 ss2 = sqlsession.getMapper(Service2.class);
			cnt = ss2.idcheck(id);
		}
		catch (Exception e ) {
			e.printStackTrace();
		}
		return cnt;
	}
	@RequestMapping(value="/ajaxinput2")
	public String ko5() {
		return "ajaxinput2";
	}
	@RequestMapping(value="/send2")
	public String ko6(HttpServletRequest request) {
		String json3 = request.getParameter("json3");
		JSONParser jp = new JSONParser();
		try {
			JSONObject joj;
			joj = (JSONObject)jp.parse(json3);
			String name = (String)joj.get("name");
			int kor = Integer.parseInt((String)joj.get("kor"));
			int eng = Integer.parseInt((String)joj.get("eng"));
			int mat = Integer.parseInt((String)joj.get("mat"));
			Service2 ss2 = sqlsession.getMapper(Service2.class);
			ss2.insert2(name, kor, eng, mat);
		}
		catch(Exception e) {
			e.printStackTrace();
		}
		return "redirect:ajaxinput2";
	}
	@ResponseBody
	@RequestMapping(value="/out3",method = RequestMethod.POST,produces = "application/text;charset=UTF-8")
	public String ko7() {
		Service2 ss2 = sqlsession.getMapper(Service2.class);
		ArrayList<AjaxDTO2> list = ss2.out2();
		JSONArray array = new JSONArray();
		JSONObject total = new JSONObject();
		for(int i=0;i<list.size();i++) {
			JSONObject member = new JSONObject();
			String name = list.get(i).getName();
			int kor = list.get(i).getKor();
			int eng = list.get(i).getEng();
			int mat = list.get(i).getMat();
			member.put("name", name);
			member.put("kor", kor);
			member.put("eng", eng);
			member.put("mat", mat);
			array.add(member);
		}
		total.put("members", array);
		String jsoninfo = array.toJSONString();
		return jsoninfo;
	}
}

 

'SPRING' 카테고리의 다른 글

230310_AJAX  (0) 2023.03.10
230309_AJAX  (0) 2023.03.09
230307_Tiles  (0) 2023.03.07
230306_Tiles  (0) 2023.03.06
230303_Tiles  (0) 2023.03.03

관련글

댓글

티스토리툴바