AJAX更改表行单击的注释

时间:2015-06-17 04:19:21

标签: php jquery html ajax reload

我目前正在开发一个网络应用程序,演示如何"签署" ASL中的不同单词。左侧是术语列表,右侧是视频和评论部分。

请参见此处的屏幕截图:http://i917.photobucket.com/albums/ad19/brycematheson/Screen%20Shot%202015-06-16%20at%2010.05.36%20PM.png

我很难在点击新词时使用AJAX来改变评论。目前,评论保持与选择新条款相同。在选择新术语时,我将如何使用AJAX更改注释部分以更新?

我的评论部分看起来像这样。更新PHP中的$id_post=3部分将更改注释以匹配数据库中具有该ID的注释,因此这不是问题,我只需要它即时执行。

这是我在index.php页面中的评论代码:

<?php 
                // Connect to the database
                require_once('models/db-settings.php'); 
                $id_post = '$_POST['rowID']; //the post or the page id
                ?>
                <div class="cmt-container">
                    <?php 
                    $sql = mysqli_query($mysqli, "SELECT * FROM comments WHERE id_post = '$id_post' ORDER BY id ASC") or die(mysqli_error($mysqli));
                    while($affcom = mysqli_fetch_array($sql,MYSQLI_ASSOC)) {
                        $id = $affcom['id'];
                        $name = $affcom['name'];
                        $email = $affcom['email'];
                        $comment = $affcom['comment'];
                        $date = $affcom['date'];

                        // Get gravatar Image 
                        // https://fr.gravatar.com/site/implement/images/php/
                        $default = "mm";
                        $size = 35;
                        $grav_url = "http://www.gravatar.com/avatar/".md5(strtolower(trim($email)))."?d=".$default."&s=".$size;

                    ?>
                    <div class="cmt-cnt">
                        <img src="<?php echo $grav_url; ?>" />
                        <div class="thecom">
                            <h5><?php echo ucfirst($name); ?></h5><span data-utime="1371248446" class="com-dt"><?php echo $date; ?></span>
                            <br/>
                            <p>
                                <?php echo $comment; ?>
                            </p>
                            <div style="float:right;"><span class="action"><a href="#" id="<?php echo $id; ?>" class="delete" title="Delete">X</a></span></div>
                        </div>
                    </div><!-- end "cmt-cnt" -->
                    <?php } ?>


                    <div class="new-com-bt">
                        <span>Write a comment ...</span>
                    </div>
                    <div class="new-com-cnt">
                        <textarea class="the-new-com"></textarea>
                        <div class="bt-add-com">Post comment</div>
                        <div class="bt-cancel-com">Cancel</div>
                    </div>
                    <div class="clearfix"></div>
                </div>

我的Javascript:

 $('#matrix tr').click(function (event) {
      var rowID = ($(this).attr('id')); //trying to alert id of the clicked row          
    $(function(){
            e.preventDefault();
            $.ajax({
                type: 'POST',
                url: 'index.php', 
                data: rowID,
                success: function(msg) {
                }
           });
       });
    });

我做错了什么?我错过了什么吗?

提前致谢。

1 个答案:

答案 0 :(得分:0)

一旦它返回给你,你实际上并没有对页面做任何事情

success: function(msg) {
}

当ajax成功完成时,此函数内的代码将执行,页面返回的任何内容都将在msg参数内。

success: function(msg) {
    $('#comments-container').html(msg);
}

这将完全替换具有id="comments-container"的元素的内容,无论返回的ajax请求是什么。

您可以正确阅读jQuery AJAX文档页面并研究一些示例。 http://api.jquery.com/jquery.ajax/

一旦您修复了您仍然遇到无法更改的问题,这是因为您没有发送格式正确的POST数据。

data: rowID,

为了像你想要的那样访问POST数据(使用$ _POST [key]),POST数据也需要是键值对。

data: "rowID=" + rowID,

阅读$ _POST超全局的PHP手册页上的注释,以便更好地理解这一点。 http://php.net/manual/en/reserved.variables.post.php

编辑:哦,如果您计划向公众发布此网站,您可能需要查看SQL注入以及如何加强您的网站。就目前而言,这很容易被破解并且您的数据库受到了损害。