ajax 페이지 호출 횟수(?) 질문
본문
페이지에서 버튼을 눌렀을때 ajax로 호출되어 실행되는 sql문이 여러번 실행됩니다....
update문에서 int 타입인 필드값을 버튼을 누를 때 마다 기존값에 +1 하는 sql을 실행했는데
어떤건 +26, 또 어떤건 +6 이런식으로 호출되네요 ㄷㄷ;;
while($row = mysqli_fetch_array($result)) 안에
<input type="hidden" id="tasker_id" name="tasker_id" value="<?php echo $row['tasker_id']; ?>">
<button class="reject_btn" value="<?php echo $row['submit_id']; ?>">거절하기</button>
라는 히든타입의 인풋태그와 '거절하기'라는 버튼이 있습니다
<script>
$(function() {
$("div").on("click", "button.reject_btn" , function() {
var value = $(this).val();
var aa = "#result";
var result_span = aa.concat(value);
var bb = "#result_div";
var result_div = bb.concat(value);
var cc = "#checkbox_div";
var result_checkbox = cc.concat(value);
var reason = $("#reason option:selected").val();
var tasker_id = $("#tasker_id").val();
$.ajax({
url : "http://suyong0507.dothome.co.kr/bbs/reject.php",
dataType: "json",
type : "post",
data : {
submit_id : value,
reason : reason,
tasker_id : tasker_id
},
success : function(res) {
if(res) {
$(result_span).text(res.aaa);
$(result_div).html(res.ccc);
$(result_checkbox).html(res.ccc);
}
}
});
});
});
</script>
<?php
include_once "./_common.php";
$submit_id = $_POST['submit_id'];
$reason = $_POST['reason'];
$tasker_id = $_POST['tasker_id'];
$sql = "update g5_submit set checking = 2, reason = '$reason' where submit_id = '$submit_id' ";
$result = sql_query($sql);
$sql2 = "select * from g5_submit where submit_id = '$submit_id' ";
$result2 = sql_fetch($sql2);
$sql3 = "update g5_member set reject_task = reject_task + 1 where mb_id = '$tasker_id' ";
$result3 = sql_query($sql3);
if($result2['checking'] == 2) {
echo json_encode(array("aaa"=>"거절됨", "ccc"=>""));
}
?>
일단은 js코드와 ajax로 호출되는 페이지인 reject.php 전문인데, 클릭으로 ajax 호출을 할시
db에 +1이 아닌 +26이 저장됩니다;;
데이터값이 26개인것도 없고 26이랑 관련된 db값을 찾아봤지만도 왜 저런 숫자가 +됬는지 이해할수가 없네요
아무리 생각해봐도 reject.php가 26번 호출됬다고 밖에 설명이 안되네요
혹시 리턴값을 뿌려주는 과정에서 ajax가 여러번 호출되나요??
select는 전혀 문제 없고 varchar 타입의 문자를 update하는 것도 문제 없습니다(숫자가 아니기에...)
!-->!-->!-->
답변 4
크롬 개발자도구에서 Network쪽 들어가시면
ajax호출시에 해당 파일이 불러와질때 동적으로 실행되는 파일들이 뜰겁니다.
거기에서 1번만 실행되는지 여러번 실행되는지 체크해보세요.
.reject_btn 버튼의 부모 div 가 26번 있어서 그런것 같아요.
<div>
<div>
.........
<button>
그럼 $('div') 이 셀렉터에 문제가 있는 것 같군요.
보통은 이렇게 하지 않지만,
$("div").on("click", ">button.reject_btn" , function() {
이렇게 div 바로 아래에서 찾도록 해보셔요.
그리고 루프로 버튼 삽입시 id="tasker_id" 중복도 고려하셔야겠고요.
굳이 input hidden 으로 파라미터를 사용하지 마시고
<buttton class="reject_btn" data-tasker="<?php echo $row['tasker_id']; ?>">
이런식으로 data 프로퍼티를 이용해보셔요.
또, 버튼 클릭시 중복 클릭 방지를 위해 클릭했을 때
.reject_btn 버튼을 disabled 시켰다가
ajax success 시 다시 활성화 시켜주는 것도 고려하시고요.
제가 테스트해 본 코드는
<ul><ul><ul><ul id="test"></ul></ul></ul></ul>
<script>
$(function() {
var html = '';
var $test = $('#test');
for (var i=0; i<5; i++) {
html += '<li class="my-1">';
html += '<button type="button" class="btn btn-outline-secondary reject" value="'+i+'">클릭</button>';
html += '</li>';
}
$test.append($(html));
$(document).on('click', '.reject', function() {
console.log($(this).val())
});
});
</script>
일부러 ul 태그를 중첩시켜서 해봤습니다.
!-->
$("div").on("click",
이부분을 특정 버튼으로 잡고 우선 테스트 해보셔야 할것 같습니다.
아니면 function 으로 잡고 한번 돌렸을때 값을 보셔야 할것 같습니다.
* "혹시 리턴값을 뿌려주는 과정에서 ajax가 여러번 호출되나요??"
=> 여러번 호출되지 않습니다. 한번만 호출됩니다.
* "db에 +1이 아닌 +26이 저장됩니다;;"
=> "update g5_member set reject_task = reject_task + 1 ~ "
기존에 25 로 저장된 상태였다면 26이 될 수 있습니다.