index.html 복사해서
ex1.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX연습</title>
</head>
<body>
<h1>원하는 구구단의 숫자?</h1>
<input type="text">
<button onclick="sendServer();">출력하기</button>
<div id="output"></div>
<script>
//입력창
const input = document.querySelector('input[type="text"]');
//출력할 태크
const output = document.getElementById('output');
//AJAX를 사용하기 위한 객체
const request = new XMLHttpRequest(); //ajax 객체 생성
//버튼을 누르면 아래 함수가 실행된다.
function sendServer() {
//버튼을 누르면 ajax로 서버로 http 요청
let v = input.value;
let url = "gugu.jsp?val=" + v; // 서버 요청 주소와 파라미터로 입력한 값을 보냄
request.open('GET', url, true); //Get메소드, 요청주소 설정
request.send(); //요청함
request.onreadystatechange = function () {
//요청단계가 성공적이면 결과를 받음 .
if (request.readyState == 4 && request.status == 200) {
let val = request.responseText; //서버로부터 받은 요청 결과
// console.log(val);// 콘솔에 확인.
output.innerHTML=val;//<br>같은 태그도 같이 출력할 수 있어야함
}
}
}
</script>
</body>
</html>
gugu.jsp 생성
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//전달 파라미터를 받아 숫자로 변환
String val = request.getParameter("val");
int n = Integer.parseInt(val);
for(int i = 1; i<=9 ; i++){
String s = String.format(" %d X %d = %d <br/>", n, i, n*i );
out.print(s);
}
%>
결과 출력
출력하기 버튼을 눌렀을 경우 입력창 초기화 하고 , 포커스 잡기
ex1.html 추가
input.value = '';
input.focus();
'FRONTEND > 기타' 카테고리의 다른 글
| jQuery ? (1) | 2023.10.05 |
|---|---|
| id로 DB검색하여 결과 출력 (0) | 2023.10.04 |
| AJAX를 이용해 서버에서 계산하여 결과 출력하기 (0) | 2023.10.04 |
| JSON 란? (0) | 2023.10.04 |
| 색상 코드 사이트 (0) | 2023.09.26 |