본문 바로가기
웹개발/기타

ajax 에서 배열을넘겨 JAVA 에서 확인 하기

by heavenLake 2021. 8. 12.
반응형

ajax 에서 배열을넘겨 JAVA 에서 확인할수있다

traditional 옵션을 넣어주면 간단하게 되는거지만

대부분 삽질을 하게된다

 

 

1.javascript

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17		 var arr = ['aa', 'bb', 'cc'];


$.ajax({
    method      : 'POST',
    url         : 'test.do',
    traditional : true,
    data        : {
        'main' : arr
    },
    success     : function(data) {
        alert(data);        
    },
    error       : function(request, status, error) {
        alert(error);
    }


});
Colored by Color Scripter		 cs

 

 

2.JAVA

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27		     @RequestMapping(value = "/test.do", method = {RequestMethod.GET, RequestMethod.POST})    
    public ModelAndView test(
           HttpServletRequest request,
           String[] main//배열 받기 traditional: true
           ) {
           
           view.setViewName("jsonView");
        try {


            System.out.println(main[0]+"===============");//aa
            System.out.println(main[1]+"===============");//bb
            System.out.println(main[2]+"===============");//cc
            System.out.println(main[3]+"===============");//errer
            //throw new Exception();
                        
            view.addObject("result", "success");
            
        }catch(Exception ex){
            ex.printStackTrace();
        }        
        
        return view;
    }


Colored by Color Scripter		 cs

 

 

Ajax를 이용하면 웹 어플리케이션과 비동기적으로 데이터를 주고 받은후 클라이언트에서 해당 데이터에 대한 처리를 할 수 있다. 쉽게 이야기하면 Ajax를 이용할 경우 별도의 웹 페이지를 호출하지 않더라도, 클라이언트 화면을 유지한채 다른 페이지를 호출할 수 있다.

Ajax에 대한 설명은 위키백과를 참고하기 바란다. - http://ko.wikipedia.org/wiki/Ajax


이러한 Ajax를 jQuery를 이용하면 정말 손쉽게 사용할 수 있는데, 기본적인 설정값만 넣어주면 바로 사용이 가능하다. 

다음 예제는 웹페이지가 로딩된 후 ajax를 이용하여 ajaxData.jsp를 호출하는 예제이다. 
ajaxData.jsp는 텍스트 형식의 값을 리턴하며 리턴된 값을 alert창과 div에 출력한다.

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42		 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax 간단 테스트</title>


<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>


<script type="text/javascript" language="javascript">


    $(document).ready(function(){
         
         
        $.ajax({
             
            type : "GET",
            url : "ajaxData.jsp?type=1",
            dataType : "text",
            error : function(){
                alert('통신실패!!');
            },
            success : function(data){
                alert("통신데이터 값 : " + data) ;
                $("#dataArea").html(data) ;
            }
             
        });
         


    });


</script>


</head>
<body>


    <div id="dataArea"></div>


</body>
</html>

 


위의 예제는 ajax 통신을 할때 가장 기본이 되는 항목만 사용하였다. 적어도 위의 설정값 정도는 최소한으로 넣어주는게 좋다.

 

 

속성 설명
 type  http 전송 method를 지정한다. GET, POST
 url  호출 URL. GET 방식일경우 URL 뒤에 파라미터를 붙여서 사용해도 된다.
 dataType  Ajax를 통해 호출한 페이지의 Return 형식이다. 형식에 따라 xml, json, html, text 등을 사용하면 된다.
 error  에러났을때의 처리 부분이다.
 success  성공했을때의 처리 부분이다. 보통 해당 부분에서 데이터 핸들링을 하면 된다.

 

 

 

 

- 각 Ajax 방식을 호출하는 방법

view plaincopy to clipboardprint?

  1. // 버튼 클릭시 ajax 실행  
  2. $("#btnOK").click(function(){  
  3.       
  4.     var url="test.aspx";  
  5.     var params="param1="+param1+"¶m2="+param1;  
  6.   
  7.     $.ajax({      
  8.         type:"POST",  
  9.         url:url,      
  10.         data:params,      
  11.         success:function(args){   
  12.             $("#result").html(args);      
  13.         },   
  14.         beforeSend:showRequest,  
  15.         error:function(e){  
  16.             alert(e.responseText);  
  17.         }  
  18.     });  
  19.       
  20. });  

 

 

1. $.post() 방식

 

- 서버에 데이터를 HTTP POST 방식으로 전송한 후 서버측 응답 받을 때 사용

 

[형식]

jQuery.post( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )

 

- url : 요청 Url

- data : 요청과 함께 서버에 보내는 string 또는 map

- success(data,textStatus,jqXHR) : 요청이 성공일때 실행되는 callback 함수

- dataType : 서버에서 내려온 data 형식. ( default : xml,json,script,text,html )

 

 

[$.ajax 로 표현]

view plaincopy to clipboardprint?

  1. $.ajax({  
  2.   type: 'POST',  
  3.   url: url,  
  4.   data: data,  
  5.   success: success,  
  6.   dataType: dataType  
  7. });  

 

 

[사용예]

view plaincopy to clipboardprint?

  1. // 요청 Url 만 , 리턴 결과값 무시  
  2. $.post("http://web/test/");  
  3.   
  4. // 요청 Url + 추가적으로 보내는 Json Data, 리턴 결과값 무시  
  5. $.post("http://web/test/", { name: "John", time: "2pm" } );  
  6.   
  7. // 요청 Url + 추가적으로 보내는 Array Data, 리턴 결과값 무시  
  8. $.post("http://web/test/", { 'choices[]': ["Jon", "Susan"] });  
  9.   
  10. // 요청 Url + 폼데이터, 리턴 결과값 무시  
  11. $.post("http://web/test/", $("#testform").serialize());  
  12.   
  13. // 요청 Url, xml(또는 html)리턴 결과값  
  14. $.post("http://web/test/",   
  15.       function(data) {    alert("Data Loaded: " + data);  });  
  16.   
  17. // 요청 Url + 추가적으로 보내는 Json Data, 리턴결과값, 결과값 형식  
  18. $.post("http://web/test/", { name: "John", time: "2pm" },    
  19.       function(data) {    process(data);  },   "xml" );  
  20.   
  21. // 요청 Url + 추가적으로 보내는 Json Data, 리턴결과값(json 다루는 형식), 결과값 형식  
  22. $.post("http://web/test/", { "func": "getNameAndTime" },    
  23.       function(data){      
  24.                      console.log(data.name); // John      
  25.                      console.log(data.time); //  2pm    
  26.       }, "json");  

 

 

 

 

2. $.get() 방식

 

- 서버에 데이터를 HTTP GET 방식으로 전송한 후 서버측 응답 받을 때 사용

 

[형식]

jQuery.get(  url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )

 

- url : 요청 Url

- data : 요청과 함께 서버에 보내는 string 또는 map

- success(data,textStatus,jqXHR) : 요청이 성공일때 실행되는 callback 함수

- dataType : 서버에서 내려온 data 형식. ( default : xml,json,script,text,html )

 

 

[$.ajax 로 표현]

view plaincopy to clipboardprint?

  1. $.ajax({  
  2.   url: url,  
  3.   data: data,  
  4.   success: success,  
  5.   dataType: dataType  
  6. });  

 

 

[사용예]

view plaincopy to clipboardprint?

  1. // 요청 Url 만 , 리턴 결과값 무시  
  2. $.get("http://web/test/");  
  3.   
  4. // 요청 Url + 추가적으로 보내는 Json Data, 리턴 결과값 무시  
  5. $.get("http://web/test/", { name: "John", time: "2pm" } );  
  6.   
  7. // 요청 Url + 추가적으로 보내는 Array Data, 리턴 결과값 무시  
  8. $.get("http://web/test/", { 'choices[]': ["Jon", "Susan"] });  
  9.   
  10. // 요청 Url, xml(또는 html)리턴 결과값  
  11. $.get("http://web/test/", function(data) {    alert("Data Loaded: " + data);  });  
  12.   
  13. // 요청 Url + 추가적으로 보내는 Json Data, 리턴결과값, 결과값 형식  
  14. $.get("http://web/test/", { name: "John", time: "2pm" },  function(data) {    process(data);  },   "xml" );  
  15.   
  16. // 요청 Url + 추가적으로 보내는 Json Data, 리턴결과값(json 다루는 형식), 결과값 형식  
  17. $.get("http://web/test/", { "func": "getNameAndTime" },  function(data){    console.log(data.name); // John    console.log(data.time); //  2pm  }, "json");  

 

 

 

 

3. $.getJSON() 방식

 

- 서버에 데이터를 HTTP GET 방식으로 전송한 후 서버측 응답을 JSON 형식으로 받을때 사용 

 

[형식]

jQuery.getJSON( url [, data] [, success(data, textStatus, jqXHR)] )

 

- url : 요청 Url

- data : 요청과 함께 서버에 보내는 string 또는 map

- success(data,textStatus,jqXHR) : 요청이 성공일때 실행되는 callback 함수

 

 

[$.ajax 로 표현]

view plaincopy to clipboardprint?

  1. $.ajax({  
  2.   url: url,  
  3.   dataType: 'json',  
  4.   data: data,  
  5.   success: callback  
  6. });  

 

 

[사용예]

view plaincopy to clipboardprint?

  1. <script>   
  2.     $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",   
  3.     {   
  4.         tags: "mount rainier",   
  5.         tagmode: "any",   
  6.         format: "json"   
  7.       },   
  8.       function(data) {   
  9.         $.each(data.items, function(i,item){   
  10.           $("<img/>").attr("src", item.media.m).appendTo("#images");   
  11.           if ( i == 3 ) return false;   
  12.         });   
  13.     });  
  14.   </script>  

 

 

 

 

4. $.ajax() 방식

 

- 서버에 데이터를 HTTP POST,GET,JSON 모든 방식 전송 가능한 통합적인 함수

- 다양한 Parameter 존재

 

[형식]

jQuery.ajax( url [, settings] ) [ 1.5 이상버젼 ] ,jQuery.ajax( settings ) [ 1.0 이상버젼 ]

 

- url : 요청 Url

- settings : key/value 쌍으로 된 Ajax 요청 Set ( optional )

 

 

[사용예]

view plaincopy to clipboardprint?

  1. // 요청 Url + 추가적 데이터, 완료된 후 리턴 메시지를 받음  
  2. $.ajax({   
  3.       type: "POST",   
  4.       url: "http://web/test/",   
  5.       data: { name: "John", location: "Boston" }   
  6. }).done(function( msg ) {   
  7.       alert( "Data Saved: " + msg );   
  8. });  
  9.   
  10. // 최종 버전 리턴 Html 가져오기  
  11. $.ajax({   
  12.       url: "http://web/test/",   
  13.       cache: false   
  14. }).done(function( html ) {   
  15.       $("#results").append(html);   
  16. });  
  17.   
  18. // 서버에 데이터를 보낸 후 저장처리, 그리고 사용자에게 리턴 완료 메시지 반환  
  19. var menuId = $("ul.nav").first().attr("id");   
  20. var request = $.ajax({   
  21.     url: "http://web/test/",   
  22.     type: "POST",   
  23.     data: {id : menuId},   
  24.     dataType: "html"   
  25. });   
  26.    
  27. request.done(function(msg) {   
  28.     $("#log").html( msg );   
  29. });   
  30.    
  31. request.fail(function(jqXHR, textStatus) {   
  32.     alert( "Request failed: " + textStatus );   
  33. });  
  34.   
  35.   
  36. // 자바 스크립트 로딩 및 실  
  37. $.ajax({   
  38.     type: "GET",   
  39.     url: "test.js",   
  40.     dataType: "script"   
  41. });  

 

 

 

4.1 $.ajaxSetup()

 

- 공통적인 기본 ajax 요청을 미리 설정함

 

[형식]

jQuery.ajaxSetup( options )

 

- optional : default Ajax 요청의 설정값 ( key/value )

 

 

[사용예]

view plaincopy to clipboardprint?

  1. // 미리 ajaxSetup에 기본사항들을 설정한 후 ajax 로 각각 호출  
  2. $.ajaxSetup({  
  3.     url: 'http://web/test/',  
  4.     global: false,   
  5.     type: "POST"   
  6.   
  7. });  
  8. $.ajax({  
  9.       // url not set here; uses 'http://web/test/'  
  10.       data: {'name': 'Dan'}  
  11. });  
  12. $.ajax({  
  13.       // url not set here; uses 'http://web/test/'  
  14.       data: {'name': 'John'}  
  15. });  

 

 

 

 

5. $.load() 방식

 

- 외부 컨텐츠 가져올때 사용

 

[형식]

.load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] )

 

- url : 요청 Url

- data : 요청과 함께 서버에 보내는 string 또는 map

- complete(responseText, textStatus, XMLHttpRequest) : 요청이 완료될때 실행되는 callback 함수

 

 

[사용예]

view plaincopy to clipboardprint?

  1. //  Html Content 로딩  
  2. $('#result').load('ajax/test.html');  
  3.   
  4. //  Html Content 로딩 후 메시지  
  5. $('#result').load('ajax/test.html', function() {  
  6.   alert('Load was performed.');  
  7. });  
  8.   
  9. //  Html Content #container Target 로딩  
  10. $('#result').load('ajax/test.html #container');  
  11.   
  12. //  array parameter 전달 후 Html Content 로딩  
  13. $("#objectID").load("test.asp", { 'choices[]': ["Jon", "Susan"] } );  

 

 



출처: https://killsia.tistory.com/entry/jquery-ajax-방법 [One Day One Line]
 

출처: https://epthffh.tistory.com/entry/ajax-배열전송 [물고기 개발자의 블로그]
 

반응형

'웹개발 > 기타' 카테고리의 다른 글

암호와 종류 (양방향 / 단방향)  (0) 2022.02.17
log4j 파일별 특정 로그 제외하거나 특정 데이터만 쌓는 방법  (0) 2022.02.17
GNU / GPL 라이센스  (0) 2021.08.02
Internet Explorer에서 addEventListener, createElement, $, jquery 등등 오류 시  (0) 2021.07.29
javascript 그림판 라이브러리  (0) 2021.07.29

관련글

댓글

티스토리툴바