상세 컨텐츠

본문 제목

ajax 로 폼데이터 서버전송 후 파일생성 및 DB저장, serialize()

IT공부방/jQuery, ajax, java

by 동해둘리 2016. 8. 9. 11:32

본문

반응형

 

 

 

* ajax 로 폼데이터 서버전송 후 파일생성 및 DB저장, serialize()

 

ajax 로 폼데이터를 전송한 후 DB에 저장하는 방법은 serialize() 를 이용하여 많이 사용하는데요,

저는, 해당 데이터를 서버로 전송하여 파일로 생성하는 코드를 만들어 보았습니다.

 

 

ajax_save.html

 

 

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
<body>
<form name = "save_form" method = POST>
    <input type = "hidden" id = "save_data" name = "save_data" value = "Sample Data">
</form>
<div id = resultDIV></div>
<script language = "javascript">
$.ajax({ 
    type : "POST" , 
    async : true , 
    url : "save_todb.php", 
    dataType : "html" , 
    timeout : 30000 , 
    cache : false , 
    data : $("#save_data").serialize() ,     
    
    error : function(request, status, error) { 
        //에러발생        
    } , 
    success : function(response, status, request) { 
        //성공시
        $('#resultDIV').html(''); 
        $('#resultDIV').append(response);  
    } , 
    beforeSend: function() { 
        //통신시작할때    
    } , 
    complete: function() { 
        //통신완료 후                
    } 
}).done(function(data) {
        // ajax 로딩이 끝난 후, save_todb.php 의 실행결과로 생성되는
        // html 문서가 data 변수로 리턴된다. 
        alert(data); 
})    
</script>
</body>
 cs

 

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
<body>
<form name = "save_form" method = POST>
    <input type = "hidden" id = "save_data" name = "save_data" value = "Sample Data">
</form>
<div id = resultDIV></div>
<script language = "javascript">
$.ajax({ 
    type : "POST" , 
    async : true , 
    url : "save_todb.php", 
    dataType : "html" , 
    timeout : 30000 , 
    cache : false , 
 
    data : $("#save_data").serialize() ,     
    
    error : function(request, status, error) { 
        //에러발생        
    } , 
    success : function(response, status, request) { 
        //성공시
        $('#resultDIV').html(''); 
        $('#resultDIV').append(response);  
    } , 
    beforeSend: function() { 
        //통신시작할때    
    } , 
    complete: function() { 
        //통신완료 후                
    } 
}).done(function(data) {
        // ajax 로딩이 끝난 후, save_todb.php 의 실행결과로 생성되는
        // html 문서가 data 변수로 리턴된다. 
        alert(data); 
})    
</script>
</body>
 cs

 

위에서 보듯이, ajax 를 이용하는 기본 방법은 동일하며, 

다만, 아래의 save_todb.php 에서 파일을 생성하는 코드만 추가된 형태입니다.

 

 

save_todb.php

 

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
<body>
<form name = "save_form" method = POST>
    <input type = "hidden" id = "save_data" name = "save_data" value = "Sample Data">
</form>
<div id = resultDIV></div>
<script language = "javascript">
$.ajax({ 
    type : "POST" , 
    async : true , 
    url : "save_todb.php", 
    dataType : "html" , 
    timeout : 30000 , 
    cache : false , 
    data : $("#save_data").serialize() ,     
    
    error : function(request, status, error) { 
        //에러발생        
    } , 
    success : function(response, status, request) { 
        //성공시
        $('#resultDIV').html(''); 
        $('#resultDIV').append(response);  
    } , 
    beforeSend: function() { 
        //통신시작할때    
    } , 
    complete: function() { 
        //통신완료 후                
    } 
}).done(function(data) {
        // ajax 로딩이 끝난 후, save_todb.php 의 실행결과로 생성되는
        // html 문서가 data 변수로 리턴된다. 
        alert(data); 
})    
</script>
</body>
 cs

 

 

위의 경우, ajax 에 의해 save_todb.php 파일을 로드하면서, save_data 를 전달하게 되는데,

save_todb.php 에서는 test.html 파일을 생성(create)한 이후에,

전달된 save_data 를 fwrite() 를 이용하여 파일에 write 하게됩니다.

 

반응형
저작자표시

'IT공부방 > jQuery, ajax, java' 카테고리의 다른 글

JavaScript 와 CSS 로 만든 PopUp 창 띄우기  (0) 2016.08.25
javascript 숫자계산시 .. 소수점오류 수정하기 toFixed() , parseFloat()  (0) 2016.08.23
nodejs 및 jQuery 를 이용한 서버와의 통신 참고하기  (0) 2016.08.05
jQuery UI 의 상호작용(interaction) draggable() 함수 살펴보기  (0) 2016.08.02
jQuery 함수 addClass() appendTo()  (0) 2016.07.30

관련글 더보기

댓글 영역

티스토리툴바