[java] ajax / List --> JSONArray

Sora Kim·2022년 4월 28일

java

목록 보기

1/5

aaa.jsp -- 일부 작업되어있고 / 내가 수정 및 개발해야하는 화면

bbb.jsp -- 팀원이 개발한 화면

ccc.jsp -- 팀원이 개발한 bbb.jsp와 연결된 팝업화면

이렇게 3개의 화면이 있고,

나는 aaa.jsp -- button -- {data} --> bbb.jsp로 전달해야하는 작업을 해야했다.

ccc.jsp -> bbb.jsp로 데이터가 전송이 되는데...
aaa.jsp -> ccc.jsp -> bbb.jsp로 데이터가 자동으로 전송되게끔 할 방법을 잘 모르겠어서
(뭔가 있을 거 같은데...... 시간이없.....)
ccc.jsp -> bbb.jsp로 전달해주는 데이터를

aaa.jsp에서 ajax를 통해 데이터를 가져오고 bbb.jsp로 전달하게끔 작업을 하기로 함

작업기능 요약

버튼 클릭 ( (unq id값 전송) )
unq id값으로 DB에서 SELECT -> 필요한 데이터만 담아서 보내기
받은 데이터 form에 담아서 다른 화면으로 전송

버튼 클릭해서 데이터 전송하기 (ajax -> controller)

<button type="button" onclick="fnRegist('31'); return false">btn</button>

<script>
 function fnRegist(id){
   	$.ajax({
        type:'post',
        dataType:'json',
        url: '/easyPeasy/'+_id,
        success : function(data) {
          /* 3번째 과정에서 완성시킬꺼 */
        },
        error : function (err, result) {
        },
        fail : function (failerr) {
        }
  	});
 }
</script>

DB에서 데이터 조회(List) / 필요한 데이터만 JSONArray에 담아서 return

@RequestMapping(value = { "/easyPeasy/{_id:.+}"})
public ResponseEntity listFor(ModelMap model
							  ,HttpServletRequest request
                              ,@RequestParam Map<String, Object> params
                              ,@PathVariable int _id) 
                      								throws Exception {
		    	
	    params.put("unqId",_id); //  sql mybatis--> where unq_col_nm = #{unqId}
	    List<Map<String, Object>> dataList = userService.selectUserInfoList(params);
	    
	    int index = 0; // for문을 위해
	    JSONArray jsArr = new JSONArray(); //org.json.simple.JSONArray
	    
	    for(Map<String, Object> map: buyerList) {
	    	JSONObject data = new JSONObject();
	    	
            // 원하는 데이터만 List에서 get
	    	data.put("data1", buyerList.get(index).get("data1_col_nm"));
	    	data.put("data2", buyerList.get(index).get("data2_col_nm"));
	    	data.put("data3", buyerList.get(index).get("data3_col_nm"));
	    	data.put("data4", buyerList.get(index).get("data4_col_nm"));
            
	    	jsArr.add(index,data); // jsonArray에 뽑아온 데이터 담기...!
	    	index++; 
	    	
	    }
	    System.out.println("================"+jsArr);

	return new ResponseEntity<>(jsArr, HttpStatus.OK); // json array return! 
}

이렇게 하면 콘솔에

[{"data4":"addr","data2":"age","data1":"name","data3":"phone"}]

이런형태로 보이게 됨...!

return 받은 데이터 form으로 전송하기 (ajax - success부분)

첫번째로 한 작업의 success 부분을 채울꺼임!

// jquery
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script> 
 
<script>
 function fnRegist(id){
   	$.ajax({
        type:'post',
        dataType:'json',
        url: '/easyPeasy/'+_id,
        success : function(data) {
        	$.each(data, function(key,value){  //jquery를 이용한 반복문 
        			console.log("key: "+key
                                +" val:"+value.data1
									+","+value.data2
                                	+","+value.data3
                                	+","+value.data4);
        			$("#data1").attr("value",value.data1);
        			$("#data2").attr("value",value.data2);
        			$("#data3").attr("value",value.data3);
        		})
        		$("#data_frm").attr("action","/user/newNewNew/");
        		$("#data_frm").submit();
        },
        error : function (err, result) {
        },
        fail : function (failerr) {
        }
  	});
 }
</script>

<body>
  <form id="data_frm" name="data_frm" method="post">
      <input type="hidden" name="data1" id="data1" value="">
      <input type="hidden" name="data2" id="data2" value="">
      <input type="hidden" name="data3" id="data3" value="">
      <input type="hidden" name="data4" id="data4" value="">
  </form>
</body>