Question

好的，我知道有很多关于这个主题的问题，但是我想要帮助改进我的代码。我正在尝试制作一个像评论系统一样的Facebook，它的工作原理与它一样，而不刷新页面。到目前为止，如果在jQuery的帮助下注释字段不为空，我可以成功提交。现在我进一步想在这里实现AJAX。所以我在那里添加了一些代码。但它不起作用。我对jQuery和AJAX都知之甚少，我会随着时间的推移而改进，但是现在我想修复错误。请更正我在下面的代码中所犯的任何错误。

jQuery和AJAX部分：

$(document).ready(function() {
    $('.commentarea').keydown(function(event) {
        if($.trim($(".commentarea").val())) {
            if(event.keyCode == 13) {
                this.form.submit(function() {
                    var textcontent = $(".commentarea").val();
                    var dataString = 'content='+ textcontent;
                    $.ajax({
                        type: "POST",
                        url: "post-comment.php",
                        data: dataString,
                        cache: true,
                        success: function(html){
                            $("#show").after(html);
                            document.getElementById('content').value='';
                            $("#flash").hide();
                            $("#content").focus();
                        }
                        return false;
                    });
                });
            }
            return false;
        }   
    });
});

HTML部分：

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="full-width">
            <textarea name="comment" placeholder="Give a comment..." class="comment-field commentarea" id="postcomment"></textarea>
        </form>

PHP部分：

<?php
include('config/db.php');
if(isset($_POST['commentarea']))
{
    $content = (!empty($_POST['comment']))?$_POST['comment']:null;
    $insert = "INSERT INTO comments(cmt_comment)VALUE(:comment)";
    $inserq = $pdo->prepare($insert);
    $inserq->bindValue(':comment', $content);
    $inserq->execute();
    $lastid = $pdo->lastInsertId();

    $sel = "SELECT * FROM comment WHERE cmt_id = :lastid";
    $seq = $pdo->prepare($sel);
    $seq->bindValue(':lastid', $lastid);
    $seq->execute();
    $sef = $seq->fetch();

}
?>

<div class="showbox"> <?php echo $sef['cmt_comment']; ?> </div>

我想要帮助它使数据发送到post-comment.php并插入并立即返回<div class="showbox"></div>，而不像Facebook那样刷新页面。

Answer 1

在form中添加<div class="showbox">，在form之下更改您的HTML部分

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="full-width">
       <textarea name="comment" placeholder="Give a comment..." class="comment-field commentarea" id="postcomment"></textarea>
</form>    
<div class="showbox"></div>

现在你可以改变你的PHP部分：

<?php
include('config/db.php');
if(isset($_POST['commentarea']))
{
    $content = (!empty($_POST['comment']))?$_POST['comment']:null;
    $insert = "INSERT INTO comments(cmt_comment)VALUE(:comment)";
    $inserq = $pdo->prepare($insert);
    $inserq->bindValue(':comment', $content);
    $inserq->execute();
    $lastid = $pdo->lastInsertId();

    $sel = "SELECT * FROM comment WHERE cmt_id = :lastid";
    $seq = $pdo->prepare($sel);
    $seq->bindValue(':lastid', $lastid);
    $seq->execute();
    $sef = $seq->fetch();
    echo $sef['cmt_comment']; //add new line 
}
?>

仔细关注Script部分。我更改了一些jquery。

$(document).ready(function() {
    $('.commentarea').keydown(function(event) {
        if($.trim($(".commentarea").val())) {
            if(event.keyCode == 13) {
                event.preventDefault();
                $("form.full-width").submit();
            }
        }   
    });

    $("form.full-width").on('submit', function(e) {
        e.preventDefault();
        var textcontent = $(".commentarea").val();
        var dataString = 'content='+ textcontent;
        $.ajax({
            type: "POST",
            url: "post-comment.php",
            data: dataString,
            cache: true,
            success: function(html){
                $("#show").append(html);
                $("#content").val('');
                $("#flash").hide();
                $("#content").focus();
            }
        });
    });
});

Answer 2

检查你的ajax电话。如果您使用的是type post，则必须在json中传递参数。进行以下更改

//var dataString = 'content='+ textcontent;

$.ajax({
            type: "POST",
            url: "post-comment.php",
            data: {content:textcontent},
            cache: true,
            success: function(html){
                $("#show").append(html);
                $("#content").val('');
                $("#flash").hide();
                $("#content").focus();
            }
        });

AJAX jQuery插入数据而不刷新

2 个答案: