<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form으로 전송한 값 서버에서 받아서 처리하기</title>
<style type="text/css"></style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#memberFrm").submit(function() {
//submit() 자바스크립트에서 onsubmit와 같습니다.
//선택자를 form으로 지정해야합니다.
var id = $('#useId').val();//가장 쉽게 받는 방법
var name = $('input[name=userName]').val();//그다음 쉬운 방법
var addr = $(':text[name=userName]').val();
//alert(id+","+name+","+addr);
//2. confirm창으로 연결한다...확인/취소...return
return confirm(name+"님의 정보를 서버로 전송할까요?");
});
});
</script>
</head>
<body>
<!--
http://localhost:8888/JQuery/7_form/05_result.jsp?userId=1&userName=1&userAddr=1
form의 name이 key로 잡힙니다. name=key , value=value-> key=value 쌍으로 서버로 갑니다.
프로그램을 하다보면, 폼에 입력된 값을 작업을 가해서 보내고 싶을때가 있습니다. 폼에 입력된 값을 전송하기 전에 처리하는 것을 해봅니다. -->
<h2>Form으로 전송한 값 서버에서 받아서 처리하기</h2>
<form action='05_result.jsp' method="get" id="memberFrm">
아이디:<input type="text" name="userId" id="useId"><br><br>
이 름:<input type="text" name="userName" id="userName"><br><br>
주 소:<input type="text" name="userAddr" id="userAddr"><br><br>
<input type="submit" value="DataSend">
</form>
</body>
</html>
<%@ 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>
<body>
<b>${param.userName} 님의 정보를 출력합니다..</b>
<ul>
<li>아이디 :${param.userId}</li>
<li>주소 :${param.userAddr}</li>
</ul>
</body>
</html>