如何使 Javascript AJAX 函数（带 JQuery）与 onclick 一起使用？

Question

我想知道最好的方法是什么，创建一个通用的 javascript 函数来发出 AJAX 请求并使用“onclick”调用它，请记住，我需要加载的 ajax 结果才能仍然使用此函数。另外，我正在使用 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 并从那里提取。请注意，它一开始是隐藏的，并且仅在启用 JavaScript 时才显示（无论如何，这是使其工作所必需的）。

要找到您的问题，您应该考虑添加错误处理程序并使用 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>

支持支持 javascript/非 javascript 的浏览器的替代方案

注意：您的后端代码需要能够区分 AJAX 和非 AJAX 请求。请注意，您可以使用 X_REQUESTED_WITH 标头 (HTTP_X_REQUESTED_WITH) 来执行此操作进行 AJAX 调用时由 jQuery 添加。欺骗是有可能的，所以要小心如何使用此检查——比如不要将任何身份验证或授权决策基于它。当您收到 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（或 jQuery 中的 .click）事件。

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);
        });
    });
});

< strong>注意

1. 您没有使用 post 或任何高级 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 美分

干杯