반응형
gradle4 API server
간단하게 더하기 서버 만들기2
이번엔 브라우저에서 값을 입력하여 ajax로 서버로 보내 더하기 처리 결과를 받아서 화면에 출력하도록 해 보자.
index.jsp 를 수정한다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding= "UTF-8"%>
<html>
<head>
<title> Add Server </title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
function onlyNumber(){
if((event.keyCode<48)||(event.keyCode>57))
event.returnValue=false;
}
$(function() {
$('#btn_sum').click(function() {
var jsonData = JSON.stringify( {
a : parseInt($('#edit_a').val()),
b : parseInt( $('#edit_b').val())
}) ;
$.ajax({
type:"POST",
url:"add",
data:jsonData,
contentType:"application/json;charset=utf-8",
success : function(data) {
// alert(JSON.stringify(data)) ;
$('#edit_c').val(data.sum) ;
},
error : function(err) {
alert(err) ;
}
});
}) ;
});
</script>
</head>
<p>
context path: ${pageContext.request.contextPath}
</p>
<form>
A: <input type="text" id="edit_a" onkeypress="onlyNumber();"/> +
B: <input type="text" id="edit_b" onkeypress="onlyNumber();"/>
<br/>
<button type="button" id="btn_sum"> 합계 </button>
<br/>
SUM: <input type="text" id="edit_c" readonly/>
</form>
</html>- 결과를 보자
'Develop > Java' 카테고리의 다른 글
| gradle5 API server. log (0) | 2021.11.14 |
|---|---|
| gradle3 API server (0) | 2021.11.13 |
| gradle2 API server (0) | 2021.11.13 |
| gradle1 기초 (0) | 2021.11.13 |
| 이클립스 단축키 이것만. (0) | 2019.11.10 |