Question

我整个星期都在工作，在我的页面上找到一个有效的评论系统，查看脚本并尽可能多地学习（有一次我很擅长这个，认证和一切，但我似乎失去了它）。

我终于让它工作 - 它连接到我的数据库没有问题，我的数据库接受从表单插入的数据。

但是，我的问题是评论没有实时显示在我的网站上。任何人都可以指出我正确的方向添加此功能？

我的connect.php如下：

<?php
    $connection = mysqli_connect('localhost', '', '', 'london34_db1');

    if(!$connection){
        echo "Error: Unable to connect to MySQL." . PHP_EOL;
        echo "Debugging errno: " . mysqli_connect_errno() . PHP_EOL;
        echo "Debugging error: " . mysqli_connect_error() . PHP_EOL;
        exit;
    }

我的commentform.php如下：

<?php
require('connect.php');

if(isset($_POST) & !empty($_POST)){
    $name = mysqli_real_escape_string($connection, $_POST['name']);
    $email = mysqli_real_escape_string($connection, $_POST['email']);
    $subject = mysqli_real_escape_string($connection, $_POST['subject']);

    echo $isql = "INSERT INTO comments (cid, name, email, subject, status) VALUES ('$id', '$name', '$email', '$subject', 'draft')";
    $ires = mysqli_query($connection, $isql) or die(mysqli_error($connection));
    if($ires){
        $smsg = "Your Comment Submitted Successfully";
    }else{
        $fmsg = "Failed to Submit Your Comment";
    }

    }
?>
<!DOCTYPE html>
<html>
<head>
    <title>Home Page</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="styles.css" >

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
</head>
<body>

<div class="container">

</div>
<div class="container">
    <div class="col-md-8">

        <div class="panel panel-default">
        <div class="panel-heading">Submit Your Comments</div>
          <div class="panel-body">
            <?php if(isset($smsg)){ ?><div class="alert alert-success" role="alert"> <?php echo $smsg; ?> </div><?php } ?>
            <?php if(isset($fmsg)){ ?><div class="alert alert-danger" role="alert"> <?php echo $fmsg; ?> </div><?php } ?>
            <form method="post">
              <div class="form-group">
                <label for="exampleInputEmail1">Name</label>
                <input type="text" name="name" class="form-control" id="exampleInputEmail1" placeholder="Name">
              </div>
              <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" name="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
              </div>
              <div class="form-group">
                <label for="exampleInputPassword1">Subject</label>
                <textarea name="subject" class="form-control" rows="3"></textarea>
              </div>
              <button type="submit" class="btn btn-primary">Submit</button>
            </form>
          </div>
        </div>

    </div>
    <div class="col-md-4">

    </div>
</div>
</body>
</html>

有人能够指出我正确的方向吗？

谢谢，

Answer 1

要让它“实时”工作，你需要两件事之一。

在发布（window.location.reload()）后刷新您的页面。你也可以扔一个名字锚。但是，这已经过时了，不推荐使用。
使用AJAX解决您的问题。您有三个选项XMLHttpRequest，fetch()，或者如果您使用的是jQuery，$.ajax()。

使用ajax现在应该是标准的一天。因为它允许前端和后端更平滑的整体流动。你说评论有效，所以我会继续这个假设。

说你有评论表：

<div class="panel-heading">Submit Your Comments</div>
  <!--- code --->
  <form id="comment_form" method="post">
    <!--- more code --->
  </form>
</div>

现在让我们假设发表评论时，不是返回简单的html，而是返回json_encoded个对象。

友情提醒，不要$_POST自我。它只是混合了东西，使水变脏。我们想要干净的代码。使用POST处理程序创建其他文件。

<?
if($_POST) {
  // handle the comment $_POST

  // when complete
  if( success ) {
    print_r(json_encode([
      'success' => true,
      'comment_body' => $_POST['comment']
    ]));
  } else {
    print_r(json_encode([
      'success' => false,
      'message' => 'Something went wrong'
    ]));

    exit;
  }
}

您可以在页面中添加简单的fetch()脚本：

<script>
  var form = document.querySelector('#comment_form'),
      // You need a comment section. Since I didn't see one, I will make my own.
      comment_section = document.querySelector('#comment_section');

  form.addEventListener('submit', e => {
    e.preventDefault();

    var data = new FormData(form);

    fetch('path/to/your/script.php', {
      body: data,
      method: form.method,
      credentials: 'same-origin'
    })
    .then(response => response.json()) // this is data from the server, you really want the response from your own page. Thus, the second `then` clause.
    .then(data => {
      // right here is where the magic begins
      // lets assume data to be a json object
      if( data.success == true ) {
        // create a new comment element. This is just an example empty div
        var comment = document.createElement('<div>');
        comment.className = "comment new-comment";
        comment.innerHTML = data.comment_body;
        comment_section.appendChild(comment);
      } else {
        // handle a failed comment
      }
    })
    .catch(err => console.warn(err));
  });
</script>

基本上这里发生的是，用户发表评论，你就像处理它一样。

但是，在回复中，您收集提交给您的数据，然后appendChild收集评论主div。您可以将其设置为默认评论。

这是非常基本的，只是一个概念证明。做一些更多的研究。但我希望这能指导你。

Answer 2

PHP是服务器端，因此您需要自动刷新页面，或者使用一些Javascript。

要自动刷新：

<meta http-equiv="refresh" content="<?= $seconds?>;URL='<?= $page?>'">

使用jQuery，您可以轮询一个响应新注释的脚本，如下所示：

function doPoll(){
    $.post('ajax/test.html', function(data) {
        alert(data);  // process results here
        setTimeout(doPoll,5000);
    });
}

自动加载新评论的最佳选择是使用 NodeJs 之类的内容。这涉及在服务器上运行节点，以及页面上的一些js。节点服务器通知客户端，而不是js轮询脚本，所以它是相反的方式。我不能举一个例子，因为我没有使用它，但我确信在网上找到例子并不难。

祝你好运！

尝试添加回复系统并在我的评论系统

2 个答案: