ajax 초보자의 질문입니다 ㅜㅜㅜ

ajax 초보자의 질문입니다 ㅜㅜㅜ

QA

ajax 초보자의 질문입니다 ㅜㅜㅜ

본문

될 것같은데 안되서 어떠한 부분에 제가 실수를 했는지 고수분들께 여쭤보고싶습니다 ㅜㅜ

canvas를 이용하여 작업한 상태의 결과물을 이미지로 변경을 한 뒤 출력되는 코드양이가 상당하여

blob라는 변수를 이용하여 간단하게 한 상태입니다. 그래서 ajax를 이용하여 save라는 버튼을 클릭 시

save_upload라는 페이지로 이동을 할려고 진행중인데 클릭 시 ajax가 성공적으로 되어 alert가 출력이 된 후 다음 페이지로 링크변경이 되는데 다음 페이지에서 데이터 값이 받아 지지를 않습니다 ㅜㅜ

혹시나 form안에 있는 input버튼을 사용하는 중에 class나 id값을 이용하여 스크립트로 진행을 하여서 

데이터 값이 안들어가는지.. 아니면 데이터를 받는 페이지에 사용한 데이터받는소스를 잘못적었는지

받아오는 데이터값이 출력이 안되는데 ... 어떠한 문제때문에 그런지 도움 좀 부탁드리겠습니다 ㅜㅜ

 

 

-------------------------------------------------------------기본 페이지 -------------------------------------


<form method="post"  style="display: inline;">
        <input type="button" class="ajaxSave" id="ajaxSave" value="save" />
    </form>
 
<script type="text/javascript">
 
$('.merge').click(function(e) {
            var canvas = document.querySelector('canvas');
            var context = canvas.getContext("2d");
            
            var image = new Image();
            image.src = canvas.toDataURL();
            
            image.onload = function(){
                context.drawImage(document.getElementsByTagName('canvas')[0], 0, 0, v.videoWidth, v.videoHeight);
                context.drawImage(document.getElementsByTagName('canvas')[1], 0, 0, v.videoWidth, v.videoHeight);
            }    
        
        
            var data = canvas.toDataURL("image/png");
            setTimeout(function(){ $('.save').click(); }, 1000)
        });

        
        $('.save').click(function(e) {
            var canvas = document.querySelector('canvas');
            var context = canvas.getContext("2d");
            var data = canvas.toDataURL("image/png");
       

           var imgData = atob(data.split(',')[1]);
           var len = imgData.length;
           var buf = new ArrayBuffer(len);
           var view = new Uint8Array(buf);
           var blob, i;
           for(i = 0; i < len; i++){
               view[i] = imgData.charCodeAt(i) & 0xff;
           }
           blob = new Blob([view], {type: 'image/png'});
           console.log(data);
           console.log(blob);
           var url = URL.createObjectURL(blob);
          console.log(url);
           var a = document.createElement('a');
           a.style = "display:none";
           a.href = url;
           
            $.ajax({
               type: "POST",
               url: "save_upload.php",
               data : data,
               success: function(msg){
                   alert("업로드 성공!");
                   window.location.href="review3_upload.php";
                   }
               });
        });
 
</script type="text/javascript">

 

-------------------------------------------------------------데이터 페이지 -------------------------------------

 


<?php
 $data = $_POST["data"];
echo $data;
?>

 

이 질문에 댓글 쓰기 :

답변 3

음... ajax 성공후 페이지 이동시 값이 없다고 하시는데 그렇게 개발을 하셨네요.

 

alert("업로드 성공");

window.location.href="review3_upload.php";

로케이션으로 페이지를 이동시켰으니 아무 데이터도 전달이 안되겠죠?

 

form을 action을 줘서 submit 하시거나 location.href="review3_upload.php?data=필요값"으로 변경을 하셔야 합니다.

 

ajax 처리 하는부분에서

..

data : data,   부분을

data : { 'data': data },  이렇게 변경해보세요

...

답변을 작성하시기 전에 로그인 해주세요.
전체 100
QA 내용 검색
filter #form ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT