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 }, 이렇게 변경해보세요
...
똑같이 ajax까지는 작동이 되지만 이동하는 페이지에서 데이터를 불러오지 못하네요 ㅜㅜ
save_upload.php 파일을 직접 호출해서 리턴 정보를 확인해 보셔야 할듯 보입니다.
