[SpringBoot] 21.01.20 SpringBoot로 Ajax 적용 예습
2021. 1. 20. 22:57ㆍAjax
<application.yml>
server:
port: 8065
spring:
mvc:
view:
prefix: /WEB-INF/jsp/
suffix: .jsp<UsrHomeController.java>
package com.example.demo.controller;
import java.util.HashMap;
import java.util.Map;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class UsrHomeController {
@RequestMapping("/usr/home/main")
String showMain() {
return "usr/home/main";
}
@RequestMapping("/usr/home/doPlus")
@ResponseBody
int doPlus(int num1, int num2) {
return num1 + num2;
}
@RequestMapping("/usr/home/doPlusJson")
@ResponseBody
Map<String, Object> doPlusJson(int num1, int num2) {
int rs = num1 + num2;
String msg = "더하기 성공";
String code = "c-plus";
Map<String, Object> rsMap = new HashMap<>();
rsMap.put("rs", rs);
rsMap.put("msg", msg);
rsMap.put("code", code);
return rsMap;
}
}
<main.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>메인</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.rs {
height:50px;
border:2px solid black;
font-size:2rem;
}
.msg {
height:50px;
border:2px solid red;
font-size:2rem;
}
.code {
height:50px;
border:2px solid green;
font-size:2rem;
}
</style>
<script>
function callByAjax1(){
var num1 = form.num1.value;
var num2 = form.num2.value;
$.post(
'doPlus',
{
num1:num1,
num2:num2
},
function(data){
//$('.rs').empty().append(data);
$('.rs').text(data);
},
'html'
);
};
function callByAjax2(){
var num1 = form.num1.value;
var num2 = form.num2.value;
$.get(
'doPlusJson',
{
num1:num1,
num2:num2
},
function(data){
$('.rs').text(data.rs);
$('.msg').text(data.msg);
$('.code').text(data.code);
},
'json'
);
};
</script>
</head>
<body>
<h1>테스트 더하기</h1>
<form name="form" action="doPlus" method="get">
<div><input type="text" name="num1" placeholder="숫자1"/></div>
<div><input type="text" name="num2" placeholder="숫자2"/></div>
<hr/>
<input type="submit" value="더하기vr.1"/>
<input onclick="callByAjax1();" type="button" value="더하기vr.2"/>
<input onclick="callByAjax2();" type="button" value="더하기vr.3"/>
</form>
<h1>결과</h1>
<div class="rs"></div>
<h1>메시지</h1>
<div class="msg"></div>
<h1>결과 코드</h1>
<div class="code"></div>
</body>
</html>
<결과>
'Ajax' 카테고리의 다른 글
| Ajax 예습 (0) | 2021.01.05 |
|---|---|
| Ajax 개념 및 특징 (0) | 2021.01.05 |