AJAX : Asynchronous Javascript And XML
JSON : light-weight, language independent, data interchange format
<코드>
[controller]
package com.human.springboot;
import java.util.ArrayList;
import org.json.JSONArray;
import org.json.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import jakarta.servlet.http.HttpServletRequest;
@Controller
public class BBSController {
@Autowired
private IDAO idao;
@GetMapping("/list")
public String dolist(/*Model model*/) {
//model.addAttribute("bbs",idao.getlist());
return "list";
}
@GetMapping("/getList")
@ResponseBody
public String doGetList() {
ArrayList<bbsDTO> alList = idao.getlist();
JSONArray ja = new JSONArray();
for(int i=0;i<alList.size();i++) {
JSONObject jo = new JSONObject();
jo.put("seqno", alList.get(i).getSeqno());
jo.put("title", alList.get(i).getTitle());
jo.put("content", alList.get(i).getContent());
jo.put("readcount", alList.get(i).getReadcount());
if(alList.get(i).getWriter()==null||alList.get(i).getWriter().equals("")) {
jo.put("writer", "-");
} else {
jo.put("writer", alList.get(i).getWriter());
}
jo.put("created", alList.get(i).getCreated());
jo.put("updated", alList.get(i).getUpdated());
ja.put(jo);
}
return ja.toString();
}
}
[list]
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>List</title>
</head>
<body>
<table border=1 id=tblList>
<tr><th>일련번호</th><th>제목</th><th>작성일</th><th>조회</th>
<c:forEach items="${bbs}" var="bbs">
<tr><td>${bbs.seqno}</td>
<td>${bbs.title}</td>
<td>${bbs.created}</td>
<td>${bbs.readcount}</td></tr>
</c:forEach>
</table>
<input type=hidden id=seqno>
<button id=btnList>새로고침</button>
<a href="/new">새글쓰기</a>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document)
.ready(function(){
$('#btnList').trigger
})
.on('click','#tblList tr',function(){
let seqno=$(this).find('td:eq(0)').text();
$('#seqno').val(seqno);
document.location='/view/'+$('#seqno').val();
return false;
})
.on('click','#btnList',function(){
$.ajax({url:'/getList',type:'get',data:{},dataType:'JSON',
beforeSend:function(){
alert('AJAX starting');
},
success:function(data){
$('table tr:gt(0)').remove();
for(let i=0;i<data.length;i++){
let str='<tr>';
str +='<td>'+data[i]['seqno']+'</td>';
str +='<td>'+data[i]['title']+'</td>';
str +='<td>'+data[i]['created']+'</td>';
str +='<td>'+data[i]['readcount']+'</td>';
$('table').append(str);
}
}})
})
</script>
</html>
<결과>
첫화면 | 새로고침 누르기 |
![]() |
![]() |
alert 확인을 누르면 목록이 뜬다. | |
![]() |
<코드>
[menu 코드를 AJAX로 만들기 : menu select]
[controller]
package com.human.springboot;
import java.util.ArrayList;
import org.json.JSONArray;
import org.json.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import jakarta.servlet.http.HttpServletRequest;
@Controller
public class BBSController {
@Autowired
private IDAO idao;
@GetMapping("/menu")
public String doMenu() {
return "cafe/menu";
}
@PostMapping("/menu_select")
@ResponseBody
public String doSelect() {
ArrayList<menuDTO> mdto = idao.menu_select();
JSONArray ja=new JSONArray();
for(int i=0;i<mdto.size();i++) {
JSONObject jo = new JSONObject();
menuDTO mo=new menuDTO();
mo=mdto.get(i);
jo.put("s_no", mo.getS_no());
jo.put("name", mo.getName());
jo.put("price", mo.getPrice());
ja.put(jo);
}
return ja.toString();
}
}
[menu]
<%@ 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>
<style>
table{boder:1px}
</style>
<body>
<table id=tblMenu>
<tr><th>일련번호</th><th>메뉴명</th><th>가격</th></tr>
</table><br>
<table>
<tr><td>메뉴명</td><td><input type=text id=name>
<input type=hidden id=s_no></td></tr>
<tr><td>가격</td><td><input type=number id=price></td></tr>
<tr><td colspan=2 align=center>
<button id=btnAdd>등록</button>
<button id=btnEmpty>비우기</button>
<button id=delete>삭제</button>
<button id=update>수정</button></td></tr>
</table>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document)
.ready(function(){
loadData();
})
.on('click','#btnEmpty',function(){
$('#name,#price,#s_no').val('');
return false;
})
function loadData(){
$.ajax({url:'/menu_select',type:'post',dataType:'json',data:{},
success:function(data){
$('#tblMenu tr:gt(0)').remove();
for(let i=0;i<data.length;i++){
let menu = data[i];
let str='<tr>';
str+='<td>'+menu['s_no']+'</td>';
str+='<td>'+menu['name']+'</td>';
str+='<td>'+menu['price']+'</td></tr>';
$('#tblMenu').append(str);
}
}})
}
</script>
</html>
[IDAO]
package com.human.springboot;
import java.util.ArrayList;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface IDAO {
ArrayList<menuDTO> menu_select();
}
[.xml]
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.human.springboot.IDAO">
<select id="menu_select" resultType="com.human.springboot.menuDTO">
select s_no,name,price from menu order by s_no asc
</select>
<insert id="menu_insert">
insert into menu(s_no,name,price) values(snoseq.nextval,#{param1},#{param2})
</insert>
<delete id="menu_delete">
delete from menu where s_no=#{param1}
</delete>
<update id="menu_update">
update menu set name=#{param1}, price=#{param2} where s_no=#{param3}
</update>
</mapper>
[menu 코드를 AJAX로 만들기 : menu insert]
<코드>
[controller]
package com.human.springboot;
import java.util.ArrayList;
import org.json.JSONArray;
import org.json.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import jakarta.servlet.http.HttpServletRequest;
@Controller
public class BBSController {
@Autowired
private IDAO idao;
@GetMapping("/menu")
public String doMenu() {
return "cafe/menu";
}
@PostMapping("/menu_insert")
@ResponseBody
public String doInsert(HttpServletRequest req) {
String retval="ok";
try {
String name=req.getParameter("name");
int price=Integer.parseInt(req.getParameter("price"));
idao.menu_insert(name,price);
}catch(Exception e) {
retval= "fail";
}
return retval;
}
@PostMapping("/menu_select")
@ResponseBody
public String doSelect() {
ArrayList<menuDTO> mdto = idao.menu_select();
JSONArray ja=new JSONArray();
for(int i=0;i<mdto.size();i++) {
JSONObject jo = new JSONObject();
menuDTO mo=new menuDTO();
mo=mdto.get(i);
jo.put("s_no", mo.getS_no());
jo.put("name", mo.getName());
jo.put("price", mo.getPrice());
ja.put(jo);
}
return ja.toString();
}
}
[menu]
<%@ 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>
<style>
table{boder:1px}
</style>
<body>
<table id=tblMenu>
<tr><th>일련번호</th><th>메뉴명</th><th>가격</th></tr>
</table><br>
<table>
<tr><td>메뉴명</td><td><input type=text id=name>
<input type=hidden id=s_no></td></tr>
<tr><td>가격</td><td><input type=number id=price></td></tr>
<tr><td colspan=2 align=center>
<button id=btnAdd>등록</button>
<button id=btnEmpty>비우기</button>
<button id=delete>삭제</button>
<button id=update>수정</button></td></tr>
</table>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document)
.ready(function(){
loadData();
})
.on('click','#btnEmpty',function(){
$('#name,#price,#s_no').val('');
return false;
})
.on('click','#btnAdd',function(){
$.ajax({url:'/menu_insert',type:'post',
data:{name:$('#name').val(),price:$('#price').val()},dataType:'text',
beforeSend:function(){
let name=$.trim($('#name').val());
if(name==''||name==null){
alert('메뉴명을 입력하시오');
return false;
}
if($('#price').val()==''){
alert('가격을 입력하시오');
return false;
}
},
success:function(data){
if(data=="ok"){
loadData();
$('#btnEmpty').trigger("click");
} else{
alert("insert 실패");
}
}
})
})
function loadData(){
$.ajax({url:'/menu_select',type:'post',dataType:'json',data:{},
success:function(data){
$('#tblMenu tr:gt(0)').remove();
for(let i=0;i<data.length;i++){
let menu = data[i];
let str='<tr>';
str+='<td>'+menu['s_no']+'</td>';
str+='<td>'+menu['name']+'</td>';
str+='<td>'+menu['price']+'</td></tr>';
$('#tblMenu').append(str);
}
}})
}
</script>
</html>
[IDAO]
package com.human.springboot;
import java.util.ArrayList;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface IDAO {
ArrayList<menuDTO> menu_select();
void menu_insert(String x1, int x2);
}
[.xml]
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.human.springboot.IDAO">
<select id="menu_select" resultType="com.human.springboot.menuDTO">
select s_no,name,price from menu order by s_no asc
</select>
<insert id="menu_insert">
insert into menu(s_no,name,price) values(snoseq.nextval,#{param1},#{param2})
</insert>
</mapper>
[menu 코드를 AJAX로 만들기 : menu delete]
<코드>
[controller]
package com.human.springboot;
import java.util.ArrayList;
import org.json.JSONArray;
import org.json.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import jakarta.servlet.http.HttpServletRequest;
@Controller
public class BBSController {
@Autowired
private IDAO idao;
@GetMapping("/menu")
public String doMenu() {
return "cafe/menu";
}
@PostMapping("/menu_insert")
@ResponseBody
public String doInsert(HttpServletRequest req) {
String retval="ok";
try {
String name=req.getParameter("name");
int price=Integer.parseInt(req.getParameter("price"));
idao.menu_insert(name,price);
}catch(Exception e) {
retval= "fail";
}
return retval;
}
@PostMapping("/menu_select")
@ResponseBody
public String doSelect() {
ArrayList<menuDTO> mdto = idao.menu_select();
JSONArray ja=new JSONArray();
for(int i=0;i<mdto.size();i++) {
JSONObject jo = new JSONObject();
menuDTO mo=new menuDTO();
mo=mdto.get(i);
jo.put("s_no", mo.getS_no());
jo.put("name", mo.getName());
jo.put("price", mo.getPrice());
ja.put(jo);
}
return ja.toString();
}
@PostMapping("/menu_delete")
@ResponseBody
public String doDeletet(HttpServletRequest req) {
String retval="ok";
try {
int s_no=Integer.parseInt(req.getParameter("s_no"));
idao.menu_delete(s_no);
} catch(Exception e) {
retval= "fail";
}
return retval;
}
}
[menu]
<%@ 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>
<style>
table{boder:1px}
</style>
<body>
<table id=tblMenu>
<tr><th>일련번호</th><th>메뉴명</th><th>가격</th></tr>
</table><br>
<table>
<tr><td>메뉴명</td><td><input type=text id=name>
<input type=hidden id=s_no></td></tr>
<tr><td>가격</td><td><input type=number id=price></td></tr>
<tr><td colspan=2 align=center>
<button id=btnAdd>등록</button>
<button id=btnEmpty>비우기</button>
<button id=delete>삭제</button>
<button id=update>수정</button></td></tr>
</table>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document)
.ready(function(){
loadData();
})
.on('click','#btnEmpty',function(){
$('#name,#price,#s_no').val('');
return false;
})
.on('click','#btnAdd',function(){
$.ajax({url:'/menu_insert',type:'post',
data:{name:$('#name').val(),price:$('#price').val()},dataType:'text',
beforeSend:function(){
let name=$.trim($('#name').val());
if(name==''||name==null){
alert('메뉴명을 입력하시오');
return false;
}
if($('#price').val()==''){
alert('가격을 입력하시오');
return false;
}
},
success:function(data){
if(data=="ok"){
loadData();
$('#btnEmpty').trigger("click");
} else{
alert("insert 실패");
}
}
})
})
.on('click','#tblMenu tr',function(){
let s_no=$(this).find('td:eq(0)').text();
$('#s_no').val(s_no);
let name=$(this).find('td:eq(1)').text();
$('#name').val(name);
let price=$(this).find('td:eq(2)').text();
$('#price').val(price);
return false;
})
.on('click','#delete',function(){
$.ajax({url:'/menu_delete',type:'post',
data:{s_no:$('#s_no').val()},dataType:'text',
beforeSend:function(){
let s_no=$.trim($('#s_no').val());
if(s_no==''||s_no==null){
alert('메뉴를 선택하세요');
return false;
}
},
success:function(data){
if(data=="ok"){
loadData();
$('#btnEmpty').trigger("click");
} else{
alert("delete 실패");
}
}
})
})
function loadData(){
$.ajax({url:'/menu_select',type:'post',dataType:'json',data:{},
success:function(data){
$('#tblMenu tr:gt(0)').remove();
for(let i=0;i<data.length;i++){
let menu = data[i];
let str='<tr>';
str+='<td>'+menu['s_no']+'</td>';
str+='<td>'+menu['name']+'</td>';
str+='<td>'+menu['price']+'</td></tr>';
$('#tblMenu').append(str);
}
}})
}
</script>
</html>
[IDAO]
package com.human.springboot;
import java.util.ArrayList;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface IDAO {
ArrayList<menuDTO> menu_select();
void menu_insert(String x1, int x2);
void menu_delete(int x1);
}
[.xml]
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.human.springboot.IDAO">
<select id="menu_select" resultType="com.human.springboot.menuDTO">
select s_no,name,price from menu order by s_no asc
</select>
<insert id="menu_insert">
insert into menu(s_no,name,price) values(snoseq.nextval,#{param1},#{param2})
</insert>
<delete id="menu_delete">
delete from menu where s_no=#{param1}
</delete>
</mapper>
[menu 코드를 AJAX로 만들기 : menu update]
<코드>
[controller]
package com.human.springboot;
import java.util.ArrayList;
import org.json.JSONArray;
import org.json.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import jakarta.servlet.http.HttpServletRequest;
@Controller
public class BBSController {
@Autowired
private IDAO idao;
@GetMapping("/menu")
public String doMenu() {
return "cafe/menu";
}
@PostMapping("/menu_insert")
@ResponseBody
public String doInsert(HttpServletRequest req) {
String retval="ok";
try {
String name=req.getParameter("name");
int price=Integer.parseInt(req.getParameter("price"));
idao.menu_insert(name,price);
}catch(Exception e) {
retval= "fail";
}
return retval;
}
@PostMapping("/menu_select")
@ResponseBody
public String doSelect() {
ArrayList<menuDTO> mdto = idao.menu_select();
JSONArray ja=new JSONArray();
for(int i=0;i<mdto.size();i++) {
JSONObject jo = new JSONObject();
menuDTO mo=new menuDTO();
mo=mdto.get(i);
jo.put("s_no", mo.getS_no());
jo.put("name", mo.getName());
jo.put("price", mo.getPrice());
ja.put(jo);
}
return ja.toString();
}
@PostMapping("/menu_delete")
@ResponseBody
public String doDeletet(HttpServletRequest req) {
String retval="ok";
try {
int s_no=Integer.parseInt(req.getParameter("s_no"));
idao.menu_delete(s_no);
} catch(Exception e) {
retval= "fail";
}
return retval;
}
@PostMapping("/menu_update")
@ResponseBody
public String doUpdate(HttpServletRequest req) {
String retval="ok";
try {
int s_no=Integer.parseInt(req.getParameter("s_no"));
String name=req.getParameter("name");
int price=Integer.parseInt(req.getParameter("price"));
idao.menu_update(name,price,s_no);
} catch(Exception e) {
retval= "fail";
}
return retval;
}
}
[menu]
<%@ 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>
<style>
table{boder:1px}
</style>
<body>
<table id=tblMenu>
<tr><th>일련번호</th><th>메뉴명</th><th>가격</th></tr>
</table><br>
<table>
<tr><td>메뉴명</td><td><input type=text id=name>
<input type=hidden id=s_no></td></tr>
<tr><td>가격</td><td><input type=number id=price></td></tr>
<tr><td colspan=2 align=center>
<button id=btnAdd>등록</button>
<button id=btnEmpty>비우기</button>
<button id=delete>삭제</button></td></tr>
</table>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document)
.ready(function(){
loadData();
})
.on('click','#btnEmpty',function(){
$('#name,#price,#s_no').val('');
return false;
})
.on('click','#btnAdd',function(){
if($('#s_no').val()==''){
$.ajax({url:'/menu_insert',type:'post',
data:{name:$('#name').val(),price:$('#price').val()},dataType:'text',
beforeSend:function(){
let name=$.trim($('#name').val());
if(name==''||name==null){
alert('메뉴명을 입력하시오');
return false;
}
if($('#price').val()==''){
alert('가격을 입력하시오');
return false;
}
},
success:function(data){
if(data=="ok"){
loadData();
$('#btnEmpty').trigger("click");
} else{
alert("insert 실패");
}
}
})
} else {
$.ajax({url:'/menu_update',type:'post',
data:{name:$('#name').val(),price:$('#price').val(),s_no:$('#s_no').val()},dataType:'text',
beforeSend:function(){
let s_no=$.trim($('#s_no').val());
if(s_no==''||s_no==null){
alert('메뉴를 선택하세요');
return false;
}
},
success:function(data){
if(data=="ok"){
loadData();
$('#btnEmpty').trigger("click");
} else{
alert("update 실패");
}
}
})
}
})
.on('click','#tblMenu tr',function(){
let s_no=$(this).find('td:eq(0)').text();
$('#s_no').val(s_no);
let name=$(this).find('td:eq(1)').text();
$('#name').val(name);
let price=$(this).find('td:eq(2)').text();
$('#price').val(price);
return false;
})
.on('click','#delete',function(){
$.ajax({url:'/menu_delete',type:'post',
data:{s_no:$('#s_no').val()},dataType:'text',
beforeSend:function(){
let s_no=$.trim($('#s_no').val());
if(s_no==''||s_no==null){
alert('메뉴를 선택하세요');
return false;
}
},
success:function(data){
if(data=="ok"){
loadData();
$('#btnEmpty').trigger("click");
} else{
alert("delete 실패");
}
}
})
})
function loadData(){
$.ajax({url:'/menu_select',type:'post',dataType:'json',data:{},
success:function(data){
$('#tblMenu tr:gt(0)').remove();
for(let i=0;i<data.length;i++){
let menu = data[i];
let str='<tr>';
str+='<td>'+menu['s_no']+'</td>';
str+='<td>'+menu['name']+'</td>';
str+='<td>'+menu['price']+'</td></tr>';
$('#tblMenu').append(str);
}
}})
}
</script>
</html>
[IDAO]
package com.human.springboot;
import java.util.ArrayList;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface IDAO {
ArrayList<menuDTO> menu_select();
void menu_insert(String x1, int x2);
void menu_delete(int x1);
void menu_update(String x1,int x2,int x3);
}
[.xml]
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.human.springboot.IDAO">
<select id="menu_select" resultType="com.human.springboot.menuDTO">
select s_no,name,price from menu order by s_no asc
</select>
<insert id="menu_insert">
insert into menu(s_no,name,price) values(snoseq.nextval,#{param1},#{param2})
</insert>
<delete id="menu_delete">
delete from menu where s_no=#{param1}
</delete>
<update id="menu_update">
update menu set name=#{param1}, price=#{param2} where s_no=#{param3}
</update>
</mapper>
<결과>
첫화면 select가 된 모습 | ![]() |
메뉴 넣기 | ![]() |
메뉴 수정하기 | ![]() |
메뉴 삭제하기 | ![]() |
왜 수정하기 안되냐고ㅠㅠㅠㅠㅠ
2023.03.13 (0) | 2023.03.13 |
---|---|
2023.03.10 (0) | 2023.03.10 |
2023.03.07 (0) | 2023.03.07 |
2023.03.06 (0) | 2023.03.07 |
2023.03.03 (0) | 2023.03.03 |