CakePHP—使用JQuery/Ajax在数据库中增加一个条目，并用结果更新一个DIV

首先，我仍在学习CakePHP，使用JQuery我几乎为零

我希望获得以下问题的帮助：

我有一个文章控制器、评论控制器和用户控制器

目前，my articles\u controller显示一篇文章，其评论加载到该页面上

无论是谁输入了评论，他/她的图片也会出现

在每条评论上，我都添加了一个喜欢/不喜欢按钮

例如：

然而，现在我只能显示它。我想实现的是使用JQuery，这样当用户单击“竖起大拇指”或“竖起大拇指”图像时，数据库中的“喜欢”和“不喜欢”字段会自动更新。另外，我希望使用JQuery更新视图中的那些相同值。请在下面输入我的代码，并感谢您的帮助

文章/视图.ctp

<div id="articles_comments">

                    <p>
            Comments
        </p>
        <?php
            foreach($comments as $comment){
        ?>
        <div id="articles_comments_user">
            <img src="<?php echo $comment['User']['image']; ?>">
            <p>
            <?php
                $created = $comment['Comment']['created'];
                echo $comment['User']['first_name'];
                echo "&nbsp;";
                echo $comment['User']['last_name'];
                echo "&nbsp;&nbsp;&nbsp;";
                //echo $comment['Comment']['created'];
                echo $this->Time->timeAgoInWords(
                    $comment['Comment']['created'], 
                    array(
                        'end'=>'+150 years'
                    )
                );

            ?>
            <p>
        </div>
        <div id="articles_comments_comment">
            <table>
                <tr>
                    <td style="width:85%">
                        <?php echo $comment['Comment']['comment'];?>
                    </td>
                    <td style="width:15%;border-left:solid thin teal;">
                        <div style="float:left;">
                            <?php echo $comment['Comment']['liked'];?>
                            <img width="20" src="/img/icons/thumb-up-icon.png"
                        </div>
                        <div style="float:right;margin-left:10px;">
                            <?php echo $comment['Comment']['disliked'];?>
                            <img width="20" src="/img/icons/thumb-down-icon.png">
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <?php
            }
        ?>
        <div class="articles_add_comment" id="formUpdateID">
            <hr style="width:100%"><br>

            <div style="float:left">
                <h3>Seu Commentario:</h3> 

            <?php
            echo $form->create(
                     'Comment',
                     array(
                           'url'=>array(
                                'controller'=>'articles',
                                'action'=>'view',
                                $article['Article']['id']
                                ),
                           'class' => 'articles_form',
                           'id' => 'loginForm'
                           )
                     );
            echo $form->input(
                'Comment.comment',
                array(
                    'label' => false,
                    'type' => 'textarea',
                    'div' => 'articles_comments_textarea',
                    'cols' => 90,
                    'rows' => 3
                    )
                );
            ?>
            </div>
            <div style="float:right">

            <?php
                echo $this->Form->submit(
                             'Send',
                             array(
                                   'class' => 'articles_comments_button'
                                   )
                            );
                echo $form->end();
            ?>
            </div>
            <div class="ajax-save-message">
                <?php echo $this->Session->flash(); ?>
            </div>
        </div>
    </div>

评论

">




东南大学评论：

---

评论是从文章视图操作生成的

就我个人而言，我会在评论控制器、

voteup

和

votedown

中创建操作。然后，将大拇指向上和大拇指向下的图像链接到

/Comments/voteup/id

，等等

完成此操作后，使用jQuery防止在单击页面时重新加载页面，例如

<a class="voteup" href="<?php echo $this->base;?>/comments/voteup/<?php echo $comment['Comment']['id'];?>">
    <img ... />
</a>

<script>
    $(".voteup").click(function(e) {
        e.preventDefault();
        $.ajax({
            url: $(this).attr('href),
            success: function() {
                // Update vote counter
            }
        });
    });
</script>

$（“.voteup”）。单击（函数（e）{
e、 预防默认值（）；
$.ajax({
url:$（this.attr（'href），
成功：函数（）{
//更新投票计数器
}
});
});

---

我相信你可以把剩下的拼凑起来。

经过一些研究和尝试，我通过以下方法解决了我的问题：

查看文件

<?php foreach $commments as $commment{ ?>

// .............................................................................

<td style="vertical-align:middle;border-left:solid thin teal;padding-left:5px;">
<div class="voteup" style="margin-left:10px;float:left;width:55px;">
    <p style="display:none;float:left">
        <?php echo $comment['Comment']['id']; ?>
    </p>
    <div style="float:left" id="article_thumbsUp">
        <?php echo $comment['Comment']'liked'];?>           
        </div>                                                      
        <img width="20" src="/img/icons/thumb-up-icon.png">
</div>
    <div class="votedown" style="float:left;width:55px;">
    <p style="display:none;float:left">
        <?php echo $comment['Comment']['id']; ?>
    </p>
    <div style="float:left" id="article_thumbsDown">
        <?php echo $comment['Comment']'disliked'];?>                                
    </div>                      
    <img width="20" src="/img/icons/thumb-down-icon.png">
</div>
</td>

// ...............................................................................

<?php } ?>

---

这是我的全部详细代码，希望它能帮助其他人。这是我知道如何做的方式，如果你有更好的方式，我很高兴知道。非常感谢。这很好。我只需要在这个系统中添加一些东西，例如只允许注册用户投票，每个评论只允许一次。这将涉及创建一个另一个表来跟踪它。

非常感谢。我已经按照您的建议创建了操作，并且它能够在单击时voteUP/voteDown。但是，JQuery魔术不起作用。正如我之前所说，我对JQuery的了解非常有限，因为我正在努力学习它。我在voteUP actionif（$id）中使用以下代码{$this->Comment->id=$id；$this->Comment->saveField（'liked'，$this->Comment->field（'liked'）+1）；}如果没有$id，我重定向到文章/索引只是为了添加，当我单击拇指支撑图像时，链接会正确地向上投票该评论，但随后它将我转发到voteUp视图，错误是该视图不可用。我不想看到它，只是更新了值。。。

<script>
$(document).ready(function(){
    $(".voteup").click(function() {
        var Id = $(this).children("p").text();
        $(this).children("#article_thumbsUp").load("/comments/voteup/"+Id);
    });
});
</script>

<script>
$(document).ready(function(){
    $(".votedown").click(function() {
        var Id = $(this).children("p").text();
        $(this).children("#article_thumbsDown").load("/comments/votedown/"+Id);
    });
});
</script>

function voteUp($id = null){    
    $this->autoRender = false; 
    if($this->RequestHandler->isAjax()){
        $this->Comment->id = $id;
        if($this->Comment->saveField('liked',$this->Comment->field('liked')+1)){
        }
    }       
    $newValue =  $this->Comment->findById($id);     
    return $newValue['Comment']['liked'];
}

function voteDown($id = null){  
    $this->autoRender = false;  
    if($this->RequestHandler->isAjax()){
        $this->Comment->id = $id;
        if($this->Comment->saveField('disliked',$this->Comment->field('disliked')+1)){      
        }
    }       
    $newValue =  $this->Comment->findById($id);     
    return $newValue['Comment']['disliked'];        
}