页面令人耳目一新，查询不会发生 - Ajax，PHP

Question

＆＃13;

＆＃13;

function add_comment(ele) {
  event.preventDefault();
  var username = "<?php echo $current_user; ?>";
  var user_id = "<?php echo $current_user_id; ?>";
  var post_id = $(ele).data('id');
  var comments = $(ele).parent(".comment-section").find(".comment").val();
  alert(comments);
  if (username == "") {
    alert("Please Log in to Star the Post");
    window.location = "http://tobbyandscooby.com/log.php";
    return;
  }
  $.ajax({
    type: 'POST',
    url: 'add_comment.php',
    data: {
      postid: post_id,
      uname: username,
      uid: user_id,
      comment: comments
    },
    success: function(response) {
      //alert("Successfully Comment is Added! ");
    }
  });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comment-section">
  <textarea id="<?php echo $post_id; ?>" class="comment" value="" data-id="<?php echo $post_id; ?>"></textarea>
  <button id="btn" class="btn-default" data-id="<?php echo $post_id; ?>" onclick="add_comment(this);">Comment</button>
  <div class="comment-show"></div>
</div>

<?php 
include("connect.php");
$username = $_POST['uname'];
$post_id = $_POST['postid'];
$user_id = $_POST['uid'];
$comments = $_POST['comment'];
$sql = "INSERT INTO comments (user_id,username,post_id,comment) VALUES ($user_id,'$username',$post_id,'$comment')";
$result = $db->query($sql);
?>

＆＃13;

＆＃13;

＆＃13;

我正在尝试使用Ajax创建一个评论系统。我做了类似的事情，如最喜欢的，投票，与Ajax的upvote。但是现在使用上面的代码，我无法将数据输入数据库，也可以点击注释按钮，即使我使用了* preventDefault（）;

，页面也会刷新

我知道我犯了一些错误但无法调试它。另请建议我如何使用ajax中的成功将输入的评论添加到 div .comment-show 。

**注意：我可以收到提醒（评论）;在preventDefault（）时工作;功能被删除！我已经为其他正常工作的元素添加了XHR请求！ **

Answer 1

问题是preventDefault() 您现在通过this中的函数调用传递onClick。

要解决此问题，请通过添加<button type="submit" ..使按钮成为提交按钮 并通过函数调用传递event：...onClick="add_comment(event);"

// complete line:
<button type="submit" id="btn" class="btn-default" data-id="<?php echo $post_id; ?>" onclick="add_comment(event);">Comment</button>

但现在你需要重写函数的各个部分，因为ele现在是事件，而不是元素： 将每$(ele)更改为$('#id')

显然在函数的开头，传入事件的变量名称需要匹配：

function add_comment(e) { // whatever you wanna name it, e has to be the same 
   e.preventDefault();  // as this e

另一个解决方案是将按钮保持为普通按钮，删除onClick，然后将onSubmit="add_comment(event);"添加到<form..>