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.php 가 26번 실행되네요 ㄷㄷ;;
근데 여기서 어떻게 해야 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") 말씀주신대로 이게 문제였구 $(document)로 바꾸니까 귀신같이 잘되네요 ㅎㅎ
$("div").on("click",
이부분을 특정 버튼으로 잡고 우선 테스트 해보셔야 할것 같습니다.
아니면 function 으로 잡고 한번 돌렸을때 값을 보셔야 할것 같습니다.
* "혹시 리턴값을 뿌려주는 과정에서 ajax가 여러번 호출되나요??"
=> 여러번 호출되지 않습니다. 한번만 호출됩니다.
* "db에 +1이 아닌 +26이 저장됩니다;;"
=> "update g5_member set reject_task = reject_task + 1 ~ "
기존에 25 로 저장된 상태였다면 26이 될 수 있습니다.
db는 이상이 없구 개발자도구에서 26번 호출되던데 이유를 모르겠네요 ㅜㅜ
$("div").on("click", "button.reject_btn" , function() {
->
$(".reject_btn").on("click", function() {
$(".reject_btn").on("click", function() {
이걸로 바꾸니까 한번 호출되네요~ 그런데 원래 제가 저 방식으로 했었거든요
처음에 다른 ajax 페이지를 호출하고 난 다음 거절하기 버튼 ajax를 호출하면 작동이 안되드라구요
$("div").on("click", "button.reject_btn" , function() { 이렇게 해줘야 거절하기 버튼이 작동합니다
하나가 되면 하나 말썽이네요 ㅜㅜ
동적으로 클릭 이벤트 엘리멘트가 추가된다면..
$(".reject_btn").on("click", function() {
->
$("document").on("click", ".reject_btn" , function() {
으로 변경하면 될 듯 합니다.
$(document).on("click", ".reject_btn" , function() {
동작은 잘됩니다만... reject.php 가 6번 불러지네요 ㄷㄷ;;
자꾸 괴롭혀서 죄송합니다 ㅜㅜ
잘 모르겠습니다.