ajax vo객체 한 행/여러 행 조회, json을 gson으로

@vo

public class Member {
	
	private String userId;
	private String userPwd;
	private String userName;
	private int age;
	private String phone;

 

**ajax 응답데이터가 vo객체 한 행 조회일 때

 

@jsp

조회할 회원번호 입력 : <input type="number" id="userNo">
<button id="btn">조회</button>

<div id="result2"></div>

<script>
    $(function(){
        $("#btn").click(function(){
            $.ajax({
                url:"ajax2.do",
                data:{num:$("#userNo").val()},
                success:function(obj){

                    console.log(obj);

                    let value = "<ul>"
                                + "<li>이름: " + obj.userName + "</li>"
                                + "<li>아이디: " + obj.userId + "</li>"
                                + "<li>나이: " + obj.age + "</li>"
                              + "</ul>";

                    $("#result2").html(value);

                }, error:function(){
                    console.log("ajax 통신 실패");
                }
            })
        })
    })
</script>

 

@Controller

@ResponseBody
@RequestMapping(value="ajax2.do", produces="application/json; charset=UTF-8")
public String ajaxMethod2(int num) {


    // Member m = mService.selectMember(num);
    // 원래는 이렇게 DB까지 갔다와야하는데

    // 조회 요청을 했다치기위해 멤버 객체 임의로 넣을게여
    Member m = new Member("leehunlee", "passwordhuni", "이훈이", 5, "01022223333");

    // JSON형태로 만들어서 응답
    JSONObject jObj = new JSONObject();
    jObj.put("userId", m.getUserId());
    // 비밀번호는 굳이 화면에 뿌리지 않을거면 담지 않으면 됨
    jObj.put("userName", m.getUserName());
    jObj.put("age", m.getAge());
    jObj.put("phone", m.getPhone());

    return jObj.toJSONString();
}

 

Member m처럼 한 행 조회라 생각할 순 있어도

각각의 필드에 있는 것을 조회 요청하는 것이기 때문에

무조건 json형태로 만들어서 응답을 해야 한다

 

 

@결과

 

 

이 json형태로 만들어주고 문자열로 리턴하는 것을

대신 해주는 gson

pom.xml에 디펜던시 복붙

 

@gson이용

@ResponseBody
@RequestMapping(value="ajax2.do", produces="application/json; charset=UTF-8")
public String ajaxMethod2(int num) {

    Member m = new Member("user01", "pass01", "이훈이", 5, "01022223333");

    // Gson객체에 제공하는 toJson이라는 메소드
    return new Gson().toJson(m); // 멤버객체를 json형태로 만들고 문자열로 리턴해라
}

 

---

 

**ajax 응답데이터가 vo객체 여러 행 조회일 때

 

<button onclick="test3();">회원 전체 조회</button>
<br><br>

<table border="1" id="result3">
    <thead>
        <tr>
            <th>아이디</th>
            <th>이름</th>
            <th>나이</th>
            <th>전화번호</th>
        </tr>   		
    </thead>
    <tbody>

    </tbody>
</table>

<script>
    function test3(){
        $.ajax({
            url:"ajax3.do",
            success:function(list) {

                console.log(list)

                let value = "";
                for(let i in list) {
                    value += "<tr>"
                             +	"<td>" + list[i].userId + "</td>"
                             +  "<td>" + list[i].userName + "</td>"
                             +  "<td>" + list[i].age + "</td>"
                             +  "<td>" + list[i].phone + "</td>"
                           + "</tr>"
                }

                $("#result3 tbody").html(value);

            }, error:function(){
                console.log("ajax 통신 실패");
            }
        })
    }
</script>

 

@Controller

@ResponseBody
@RequestMapping(value="ajax3.do", produces="application/json; charset=UTF-8")
public String ajaxMethod3() {

    // ArrayList<Member> list = mService.seelctList();
    ArrayList<Member> list = new ArrayList<Member>();

    list.add(new Member("leehunlee", "passwordhuni", "이훈이", 5, "01022223333"));
    list.add(new Member("cutyuri", "passwordyuri", "한유리", 5, "01022224444"));
    list.add(new Member("maengggungi", "passwordmaenggu", "맹구", 5, "01022225555"));

    return new Gson().toJson(list); // "[{}, {}, {}]" 객체 배열 형식
}

 

@결과