AJAX 2일차 : 제이슨 배열출력방법

기본 방법은 밑에 있다...중요한것은 받은걸 화면 출력...나는 FOR문이 약하다..ㅠㅠ

<h4>6. 서버로 전송값을 보내고 JSONArray로 결과 받아서 처리</h4>
	<p>유저 번호를 보내서 해당 유저를 가져오고, 없는 경우 전체리스트 가져오기</p>
	유저 번호 입력 :
	<input type="text" id="find-num">
	<br>
	<p id="p6"></p>
	<button id="jq-btn6">실행 및 결과확인</button>

/* 6번 */
	$("#jq-btn6").on("click", function(){
		var idNum=$("#find-num").val();
		$.ajax({
			url:"/ajax/ex5.kh",
			type:"get",
			data:{"idNum":idNum},
			success:function(data){
/* 				data.forEach((member,i)=> {				
				$("#p6").append('<p>'+member.memberId +member.memberPwd+'</p>');	
				});	 */	
				var htmlSTR='';
				for(var i=0;i<data.length;i++){
					htmlSTR+=data[i].memberId +","+ data[i].memberPwd+"<br>";
				}
					$("#p6").html(htmlSTR);
			},
			error:function(){
				console.log("처리실패");
			}
		})

화면 출력시 forEach문 돌리는 것도 주의 해야함!

@ResponseBody
	@RequestMapping(value = "/ajax/ex5.kh",produces="application/json;charset=UTF-8", method = RequestMethod.GET)
	public String exerciseAjax5(@RequestParam("idNum") String idNum){

		ArrayList<Member> mList=new ArrayList<Member>();
		mList.add(new Member("khuser01", "pass01"));
		mList.add(new Member("khuser02", "pass02"));
		mList.add(new Member("khuser03", "pass03"));
		mList.add(new Member("khuser04", "pass04"));
		mList.add(new Member("khuser05", "pass05"));
		JSONArray jsonArr= new JSONArray(); 
		Boolean check=false;
		for(Member mOne : mList) {	
			if(mOne.getMemberId().equals(idNum)) {
				JSONObject jsonObj=new JSONObject();
				jsonObj.put("memberId", mOne.getMemberId());
				jsonObj.put("memberPwd",mOne.getMemberPwd());	//======>{"memberId":"khuser01","memberPwd":"pass01"}
				jsonArr.add(jsonObj);
				check=true;
				break;
			}
		} 
		if(!(check)) {
				for(Member mTwo : mList) {	
					JSONObject jsonObj=new JSONObject();   
					jsonObj.put("memberId", mTwo.getMemberId());
					jsonObj.put("memberPwd",mTwo.getMemberPwd());	
					jsonArr.add(jsonObj);
				}				
		}
		
		//return jsonArr.toJSONString();
		return jsonArr.toString();

	}

 

여기서 중요한것은 값을 받아서 없으면 전체 출력 데이터인데 FOR안에 ELSE로 진행했더니 배열값이 5번 출력된다.

밖으로 뽑아서 진행해야 한다. CHECK값으로 부분을 출력한것!!

 

 

	<h4>6. 서버로 전송값을 보내고 JSONArray로 결과 받아서 처리</h4>
	<p>유저 번호를 보내서 해당 유저를 가져오고, 없는 경우 전체리스트 가져오기</p>
	유저 번호 입력 :
	<input type="text" id="find-num">
	<br>
	<p id="p6"></p>
	<button id="jq-btn6">실행 및 결과확인</button>

	@ResponseBody
	@RequestMapping(value = "/ajax/ex5.kh",produces="application/json;charset=UTF-8", method = RequestMethod.GET)
	public String exerciseAjax5(){
		ArrayList<Member> mList=new ArrayList<Member>();
		mList.add(new Member("khuser01", "pass01"));
		mList.add(new Member("khuser02", "pass02"));
		mList.add(new Member("khuser03", "pass03"));
		mList.add(new Member("khuser04", "pass04"));
		mList.add(new Member("khuser05", "pass05"));
		JSONArray jsonArr= new JSONArray();        //======> [ ]  배열 생성
		for(Member mOne : mList) {			
			JSONObject jsonObj=new JSONObject();   //======>{ } 객체 생성 / 배열에 전달후 초기화
			jsonObj.put("memberId", mOne.getMemberId());
			jsonObj.put("memberPwd",mOne.getMemberPwd());	//======>{"memberId":"khuser01","memberPwd":"pass01"}
			jsonArr.add(jsonObj);                  //======>[{},{"memberId":"khuser01","memberPwd":"pass01"}.{},...]
		}
		
		//return jsonArr.toJSONString();
		return jsonArr.toString();

	}

 

기본 배열 출력