<td>
<a href="javascript:void modify(<%= rs.getInt("midx")%>)"><%= rs.getString("mall_id")%></a>
</td>
<script>
// .js파일에 수정페이지(.jsp)로 식별 번호와 함께 보내는 script생성
function modify(no) {
var f = document.createElement('form');
var data = document.createElement('input');
data.setAttribute("type","hidden");
data.setAttribute("name","idx");
data.setAttribute("value",no);
f.appendChild(data);
f.setAttribute("method","post");
f.setAttribute("action","./jsp11.jsp"); //새로운 jsp파일로 보내기
document.body.appendChild(f);
f.submit();
}
</script>
클릭시 modify 페이지로 넘어감🔽
- 수정페이지(.jsp) 1. body 내 input type hidden 넣고 value값 고유 idx 번호로 세팅
2. 변경 가능한 항목 input or select로 변경 - 레이아웃은 기존 상세와 동일 3. 수정버튼에 js추가(ajax로 ) ./jsp12.jsp 로 해당 input값들 넘김 4. jsp12.jsp에서 해당 input name값으로 받아서 sql연결 후 update 5. 정상 변경시 out.print("ok") , 문제 발생시 out.print("no") 6. front에서 ok냐 no냐로 핸들링
넘기는 방식은 2가지가 될 수 있다 form으로 넘기느냐 , ajax로 넘기느냐
우린 ajax 방식~
-jsp11.jsp
<%@page import="java.text.DecimalFormat"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="./dbconfig.jsp"%>
<%
String idx = request.getParameter("idx");
//view table로 select 한 상황
String sql = "select * from member_info where midx=?";
PreparedStatement ps = dbcon.prepareStatement(sql);
ps.setString(1,idx);
ResultSet rs = ps.executeQuery();
rs.next();
//상품 구매내역 추가
String sql3 = "select * from pays where mall_id=?";
ps = dbcon.prepareStatement(sql3);
ps.setString(1,rs.getString("mall_id"));
ResultSet rs3 = ps.executeQuery();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
table tr td {padding : 5px;}
</style>
<body>
<input type="hidden" name="midx" value="<%=idx%>"> //해당영역 추가
<p>개인정보 수정</p>
<table border="1" cellpadding="0" cellspacing="0">
<tbody> //변경 가능한 부분 inpt으로 변경
<tr>
<td>아이디</td>
<td><%= rs.getString("mall_id") %></td>
<tr>
<tr>
<td>고객명</td>
<td><input type="text" name="mall_name" value="<%= rs.getString("mall_name") %>"></td>
<tr>
<tr>
<td>연락처</td>
<td>[<%= rs.getString("tel_corp") %>] <input type="text" name="tel_no" value="<%= rs.getString("tel_no") %>"></td>
<tr>
<tr>
<td>이메일</td>
<td><%= rs.getString("mall_email") %></td>
<tr>
<tr>
<td>주소</td>
<td>(<%= rs.getString("mall_post") %>) <%= rs.getString("mall_road") %> <%= rs.getString("mall_addr") %></td>
<tr>
<tr>
<td>광고수신(SMS)</td>
<td>
<select name="ad_sms">
<option value="Y" <% if(rs.getString("ad_sms").intern()=="Y") out.print("selected"); %>>수신함</option>
<option value="N" <% if(rs.getString("ad_sms").intern()=="N") out.print("selected"); %>>수신안함</option>
</select>
</td>
<tr>
<tr>
<td>광고수신(email)</td>
<td>
<select name="ad_email">
<option value="Y" <% if(rs.getString("ad_email").intern()=="Y") out.print("selected"); %>>수신함</option>
<option value="N" <% if(rs.getString("ad_email").intern()=="N") out.print("selected"); %>>수신안함</option>
</select>
</td>
<tr>
<tr>
<td>가입일자</td>
<td><%= rs.getString("mall_join") %></td>
<tr>
<tr>
<td>포인트(적립금)</td>
<td>
<%
DecimalFormat df = new DecimalFormat("###,###");
out.print(df.format(rs.getInt("total")));
%>
</td>
<tr>
<tr>
<td>상품구매 리스트</td>
<td>
<ul style="list-style:none; padding : 0; margin : 0">
<%
while(rs3.next()){
%>
<li style="border-bottom : 1px solid black">
구매 코드 : <%=rs3.getString("pcode") %> <br>
결제 금액 : <%=rs3.getString("pay_money") %> <br>
결제 일시 : <%=rs3.getString("pay_date") %>
</li>
<%
}
%>
</ul>
</td>
<tr>
</tbody>
</table>
<input type="button" value="리스트 보기" onclick="golist()">
<input type="button" value="수정하기" onclick="info_modify()">
</body>
<script type="text/javascript">
function golist(){
location.href = "./jsp8.jsp";
}
//ajax로 수정할 값 보내는 function
function info_modify(){
var midx = document.getElementsByName("midx"); //배열로 들어옴
var mall_name = document.getElementsByName("mall_name");
var tel_no = document.getElementsByName("tel_no");
var ad_sms = document.getElementsByName("ad_sms");
var ad_email = document.getElementsByName("ad_email");
//post 전송을 하기 위한 생성
var data="midx=" + midx[0].value;
data += "&mall_name=" + mall_name[0].value;
data += "&tel_no=" + tel_no[0].value;
data += "&ad_sms=" + ad_sms[0].value;
data += "&ad_email=" + ad_email[0].value;
var html;
html = new XMLHttpRequest();
html.onreadystatechange = function(){
if(html.readyState == 4 && html.status==200){
console.log(this.response); //결과값 return
if(this.response=="ok"){
alert("올바르게 해당 정보가 변경되었습니다.");
location.reload(); //현재 페이지 새로고침
}else{
alert("올바른 값이 전달되지 않았습니다.");
}
}
}
html.open("POST","./jsp12.jsp",true);
html.setRequestHeader("content-type","application/x-www-form-urlencoded");
html.send(data); //전송
}
</script>
</html>
<%
rs.close();
ps.close();
dbcon.close();
%>
수정 가능한 영역들 input or select로 변경
🔽 jsp12.jsp (수정하기 버튼 클릭시 이동)
trimDirectiveWhitespaces="true" 이거 없으면 모든 여백이 텍스트로 인식됨
