[AJAX] 버튼을 클릭했을 때 post 방식으로 서버에 데이터 전송 후 응답받기

jsp

이름: <input type="text" id="input2_1"> <br>
나이: <input type="text" id="input2_2">
<button onclick="test2();">전송</button>
<br>
응답: <label id="output2"></label>

 

방법1.

<script>
    function test2(){
        $.ajax({
            url: "jqAjax2.do",
            data: {
                name: $("#input2_1").val(),
                age: $("#input2_2").val()
            },
            type: "post",
            success: function(result){
                $("#output2").text(result);
                console.log(result);
            },
            error: function(){
                console.log("ajax 통신 실패");
            }
        });
    }
</script>

 

 

 

 

 

AjaxController2(방법1)

   : AJAX로는 하나의 데이터만 응답할 수 있다.

 

1번) 요청 처리를 완료했다는 가정 하에 응답할 데이터(문자열)

 

2번) ajax로 결과를 여러 개 응답할 때 요청 처리를 완료했다는 가정 하에 응답할 데이터(문자열)

@WebServlet("/ajax2.do")
public class JqAjaxController2 extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    public JqAjaxController2() {
        super();
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String name = request.getParameter("name");
        String age = request.getParameter("age");
        
        // 1번
        String responseData = "이름: "+name+" 나이: "+age;
        response.setContentType("text/html; charset=UTF-8");
        response.getWriter().print(responseData);
		
        // 2번
        //response.setContentType("text/html; charset=UTF-8");
        //response.getWriter().print(name);
        //response.getWriter().print(age);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}

 

 

 

 

 

방법2.

<script>
    function test2(){
        $.ajax({
            url: "jqAjax2.do",
            data: {
                name: $("#input2_1").val(),
                age: $("#input2_2").val()
            },
            type: "post",
            success: function(result){
                $("#output2").text(result);
                    // 배열 출력
                    //$("#output2").text("이름: "+result[0]+" 나이: "+result[1]);
					
                    // 객체 출력
                    $("#output2").text("이름: "+result.name+" 나이: "+result.age);
            },
            error: function(){
                console.log("통신 실패");
            }
        });
    }
</script>

 

 

 

 

 

AjaxController2(방법2)

   : JSON으로 여러 개의 데이터를 응답할 수 있다.

 

1) 배열 형태

   : JSONArray[value, value, value, ...]

 

2) 객체 형태

   : JSONObject{key:value, key:value, ...}

@WebServlet("/ajax2.do")
public class JqAjaxController2 extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    public JqAjaxController2() {
        super();
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String name = request.getParameter("name");
        String age = request.getParameter("age");
        
        // 배열 형태
//      JSONArray jArr = new JSONArray();
//      jArr.add(name);  // ["김철수"]
//      jArr.add(age);  // ["김철수", 20]
//		
//      response.setContentType("application/json; charset=UTF-8");
//      response.getWriter().print(jArr);
		
        // 객체 형태
        JSONObject jobj = new JSONObject();  // {}
        jobj.put("name", name);  // {name: "김철수"}
        jobj.put("age", age); // {name:"김철수", age:20}
		
        response.setContentType("application/json; charset=UTF-8");
        response.getWriter().print(jobj);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}

 

 

 

- 기본 화면

 

- 입력 후 화면