반응형
1.jsp에서 2.jsp를 포함하는 웹 페이지를 구성
<!-- 1.jsp -->
<script type="text/javascript">
if(type == "test"){
$("#sample-data").show();
$.ajax({
type: 'POST',
url: '/test/sample',
data: { testId: testId },
success: function(response){
console.log("send!!");
},
error: function(error){
console.log("wrong....");
}
});
}
</script>
<div class="sample-data" id="sample-data" style="display: block;">
<jsp:include page="2.jsp" flush="true"/>
</div><!-- 2.jsp -->
<html>
<body>
<script>
function setSample(){
$.ajax({
method: "GET",
url: "/test/sample/"});
}
setSample();
</script>
</body>
</html>그리고 ajax통신이 success하면 jsp를 새로고침 하는 구조로 만들고 싶었다.
1트 - ajax결과에 새로고침 코드 추가
<!-- 1.jsp -->
<script type="text/javascript">
if(type == "test"){
$("#sample-data").show();
$.ajax({
type: 'POST',
url: '/test/sample',
data: { testId: testId },
success: function(response){
console.log("send!!");
<!-- 1. $("#sample-data").load(location.href + " #sample-data"); -->
<!-- 2. $("#sample-data").load('test/sample'); -->
},
error: function(error){
console.log("wrong....");
}
});
}
</script>
<div class="sample-data" id="sample-data" style="display: block;">
<jsp:include page="2.jsp" flush="true"/>
</div>1. 방법은 #sample-data 부분을 새로고침 하는 것이다.
2. 방법은 #sample-data 부분에 새로 URL을 불러오는 것이다.
1. 방법은 무한반복 일어나고 2. 방법은 JSON자체를 출력해서 사용 할 수 없었다.
2트 - function을 다시 불러오도록 수정
<!-- 1.jsp -->
<script type="text/javascript">
if(type == "test"){
$("#sample-data").show();
$.ajax({
type: 'POST',
url: '/test/sample',
data: { testId: testId },
success: function(response){
console.log("send!!");
setDataInajax();
},
error: function(error){
console.log("wrong....");
}
});
}
</script>
<div class="sample-data" id="sample-data" style="display: block;">
<jsp:include page="2.jsp" flush="true"/>
</div><!-- 2.jsp -->
<html>
<body>
<script>
function setSample(){
$.ajax({
method: "GET",
url: "/test/sample/"});
}
setSample();
funnction setDataInajax(){
setSample();
}
</script>
</body>
</html>이렇게 하니 2.jsp의 setSample()을 다시 실행하나 기존 JSON데이터가 초기화 되지 않고 그 위에 데이터가 쌓이고 있었다.
해당 이슈와는 별개로 2.jsp의 데이터가 변하지 않아 Controller단에서 로그를 확인해보니 ajax로 POST했던 testId가 정상적으로 넘어가서 DB쿼리까지 정상적으로 되었으나 다시 재호출 되면서 testId가 null로 바뀌는 이슈가 있었다.
해결해야 할 이슈가 변경되었다.
1. 2.jsp에서 JSON데이터 초기화
2. Controller 재호출 방지
고민하다 나온 결론은 2.jsp에서 ajax를 하면서 GET을 하는데 이때 testId가 없이 GET을 해서 이런 이슈가 나오는 것 같다.
돌고 돌아 다시 원점으로 돌아온것 같다.
결국에는 jsp안에 jsp로 parameter를 넘겨줘야 하는 방법을 찾아봐야 할것 같다.
+ ) tiles를 이용해 1.jsp와 2.jsp를 변경하게 하는건 어떨까?
반응형
'Frontend > jQuery & JSTL' 카테고리의 다른 글
| [jQuery] ajax를 이용한 Controller로 값 전달 (0) | 2023.10.17 |
|---|---|
| [jQuery] Uncaught TypeError: Cannot read properties of undefined (reading 'classList') (0) | 2023.10.10 |
| modal구현 및 mysql 시분초 변환 (0) | 2023.10.04 |
| table data row이벤트 처리 (0) | 2023.09.26 |
| JSP에서 JSP로 데이터 전달 (0) | 2023.09.12 |
