onclick 함께 작동하도록 Javascript AJAX 함수 (JQuery 함께) 만드는 방법?

Question

나는 AJAX 요청을 만들고 'onclick'으로 호출하는 일반적인 자바 스크립트 함수를 만드는 가장 좋은 방법이 무엇인지 궁금해했다. 마음에두고이 함수로 작업 할 때로드 된 아약스 결과가 필요하다는 것을 명심해야한다. 또한 JQuery와 PHP를 사용하고 있습니다.

<a href="#" onclick="postLike(<?php echo $post_id; ?>);">Like Post</a> 

<script> 
function postLike(post_id){ 
    $.ajax({ 
     async:true, 
     dataType:"html", 
     position:"html", 
     success:function (data, textStatus) { 
      $("#post-"+post_id+"-like").html(data); 
     }, 
     url: "domain\/likes\/like\/"+post_id 
    }); 
    return false; 
} 
</script> 

나를 위해 작동하지 않는 것 같습니다.

감사합니다.

Answer 1

나는 당신의 문제가 무엇인지 모르겠지만, 어떻게 처리 할 것인가. 게시물 ID가 href에 추가되고 거기에서 추출되므로 게시물 ID가 영숫자 인 경우 문제가 발생하지 않습니다. 숨겨진 시작되고 자바 스크립트가 활성화되어있는 경우에만 표시됩니다 (어쨌든 작동하게하는 데 필요합니다).

문제를 찾으려면 오류 처리기를 추가하고 Firefox/Firebug를 사용하여 요청 및 응답을 볼 때 고려해야합니다.

<a class="like" href="#<?php echo $post_id; ?>");" style="display: none'">Like Post</a> 

<script type="text/javascript"> 
    $(function() { 
     $('.like').show().click(function() { 
      var post_id = $(this).attr('href').replace(/^#/,''); 
      $.ajax({ 
       async:true, 
       dataType:"html", 
       success:function (data, textStatus) { 
        $("#post-"+post_id+"-like").html(data); 
       }, 
       url: "domain/likes/like/"+post_id 
      }); 
      return false; 
    } 
</script> 

대안

는 모두 자바 스크립트/비 자바 스크립트를

참고 가능 브라우저를 지원합니다 : 백엔드 코드는 AJAX와 비 AJAX 요청을 구별 할 수 있어야합니다. AJAX 호출시 jQuery가 추가 한 X_REQUESTED_WITH 헤더 (HTTP_X_REQUESTED_WITH)를 사용하여이 작업을 수행 할 수 있습니다. 스푸핑 할 수 있으므로이 검사를 어떻게 사용하는지 조심해야합니다 (인증 또는 권한 결정을 기반으로하지 않는 것처럼). AJAX 요청을 받으면 HTML 스 니펫 만 반환하면됩니다. 비 AJAX의 경우 전체 페이지를 다시 렌더링해야합니다.

<a class="like" href="/domain/likes/like/<?php echo $post_id; ?>");">Like Post</a> 

<script type="text/javascript"> 
    $(function() { 
     $('.like').show().click(function() { 
      var url = $(this).attr('href'); 
      $.ajax({ 
       async:true, 
       type: 'post', // technically it changes data so post is RESTful 
       dataType:"html", 
       success:function (data, textStatus) { 
        $("#post-"+post_id+"-like").html(data); 
       }, 
       url: url 
      }); 
      // cancel the default link action so we don't get two like's 
      return false; 
    } 
</script> 

Answer 2

가장 좋은 방법은 jQuery .bind, .live 또는 .delegate 함수로 onclick (또는 .click에서 jQuery) 이벤트에 바인딩하는 것입니다.

Answer 3

우선 jQuery를 사용하는 경우 앵커 태그의 onclick 속성을 사용할 필요가 없습니다 (매우 눈에 띄지 않습니다). 이 구문을 시도해보십시오

여기

<a href="#" id="postLike" <other attributes>>Like Post</a> 

<script type="text/javascript"> 
$('#posLike').click(function(){ 
    $.ajax({ 
     async:true, 
     dataType:"html", 
     position:"html", 
     success:function (data, textStatus) { 
      $("#post-"+post_id+"-like").html(data); 
     }, 
     url: "domain\/likes\/like\/"+post_id 
    }); 
    return false; 
}); 
</script> 

Answer 4

이다 나는 일반적으로이 문제를 해결하기 위해 무엇을 : 당신이 게시물 밖으로 루프를 필요로 할 때 당신의 PHP에서

을하고 링크를 생성, 앵커에 대해 고유 한 ID를 할당 같은 :

foreach ($posts as $post) { 
    echo "<a href='javascript://' class='like-anchors' id='like-post-{$post['id']}'>Like Post</a>"; 
} 

는 그런 다음 JS 코드에서, 당신은이 작업을 수행 할 수 있습니다

$(document).ready(function() { 
    $('.like-anchors').click(function() { 
     var id = $(this).attr('id').substring(10); 
     $.get("domain/likes/like/"+id, function(data) { 
      $('#post-'+id+'-like').html(data); 
     }); 
    }); 
}); 

참고

1. 게시물 또는 사전 Ajax 기능을 사용하지 않습니다. $ .get으로 충분합니다. 이 점에 대해 자유롭게 의견을 말하십시오.
2. 위로 가기 브라우저를 스크롤하지 않으려면 href="javascript://"을 사용하십시오.
3. 더 나은 방법으로 래퍼 div에 전역 ID를 할당하면 ID를 다 소모하지 않을 수 있습니다.내가 포스트, 콘텐츠 및 같은 버튼이있는 경우, 나는이 작업을 수행 할 것이라고 말했습니다 :

PHP

<?php foreach($posts as $post): ?> 
<div class="post-body" id="post-<?php echo $post['id'] ?>"> 
    <div class="post-content"></div> 
    <div class="post-controls"> 
     <a href="javascript://" class="post-like">Like This Post</a> 
    </div> 
</div> 
<?php endforeach; ?> 

JS

$(document).ready(function() { 
    $('.post-like').click(function() { 
     var parent = $(this).parent().parent(); 
     var id = parent.attr('id').substring(5); 
     $.get("domain/likes/like/"+id, function(data) { 
      parent.children('.post-content').html(data); 
     }); 
    }); 
}); 

은을 완료하는 방법에는 여러 가지가 있습니다 태스크. 이것들은 단지 2 센트입니다

건배