2024-12-30
<%@ 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>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script type="text/javascript">
$(function() { // 문서의 body 부분을 읽고 jquery 를 실행하는 코드(무명 콜백함수)
$(".submit").on("click", function() {
let txt = $("form").serialize(); // 데이터를 쿼리 스트링식으로 순서대로 전달(get 방식)
alert(txt);
});
});
</script>
</head>
<body>
<div align="center">
<form>
<table border="1" width="350">
<tr>
<td colspan="2" align="center">
<h3>폼 데이터를 쿼리 스트링으로 전달</h3>
</td>
</tr>
<tr>
<th>아이디</th>
<td><input name="id"></td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type="password" name="pwd"></td>
</tr>
<tr>
<th>나 이</th>
<td><input name="age"></td>
</tr>
<tr>
<th>연락처</th>
<td><input name="phone"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="전송" class="submit">
<input type="reset" value="취소">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>'JSP > 기초 내용 정리' 카테고리의 다른 글
| JSP(Ajax)_Customer (0) | 2024.12.31 |
|---|---|
| JSP(Ajax)_Join (0) | 2024.12.31 |
| JSP(Ajax)_03 (0) | 2024.12.31 |
| JSP(Ajax)_02 (0) | 2024.12.31 |
| JSP(Ajax)_01 (0) | 2024.12.31 |