我正在创建一个类似于项目的时间轴,允许在帖子上写评论。但是我无法插入数据。评论按预期显示。表单值似乎没有传递到save_comments.php页面。
以下是代码
config.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav">
<div class="zf-folder">
<li class="active">
<div id="tabFolder" class="_tabFolder _itemPosition" style="height: 40px;border-bottom:1px groove; user-select: none;">
<div class="_sideFolder"></div>
<div class="_iconText" style="width: 215px">
<div class="ellipsis">
<div class="_iconFolder">
<div class="_icon-col">
</div>
</div>
<a href="#mainFolder" aria-controls="mainFolder" data-toggle="tab">Main Folder<span class="hyperspan"></span></a>
</div>
</div>
</div>
</li>
</div>
<div class="zf-folder">
<li>
<div id="tabFolder2" class="_tabFolder _itemPosition" style="height: 40px;border-bottom:1px groove; user-select: none;">
<div class="_sideFolder"></div>
<div class="_iconText" style="width: 215px">
<div class="ellipsis">
<div class="_iconFolder">
<div class="_icon-col">
</div>
</div>
<a href="#secondFolder" aria-controls="secondFolder" data-toggle="tab">Second Folder<span class="hyperspan"></span></a>
</div>
</div>
</div>
</li>
</div>
</ul>
<!-- CONTENT -->
<div class="tab-content">
<div class="tab-pane fade in active" id="mainFolder">
<div class="zf-table">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Name</th>
<th>Start Date</th>
<th>End Date</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>
<button class="btn btn-success btn-xs approve-off" type="submit" value="approve">
<span class="fa fa-check-square-o"></span> Approve
</button>
<button class="btn btn-danger btn-xs reject-off" type="submit" value="reject">
<span class="fa fa-times"></span> Reject
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade in" id="secondFolder">
<div class="zf-table">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Name</th>
<th>Start Date</th>
<th>End Date</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>
<input hidden="hidden" name="offId" />
<button class="btn btn-danger btn-xs delete-ocoff" type="submit" value="delete">
<span class="fa fa-times"></span> Delete
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
的index.php
<?php
$con=new PDO("mysql:host=localhost;dbname=posts&comments","root","");
$con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
?>
的comments.php
<?php
include 'config.php';
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<?php
$sql=$con->prepare("SELECT * FROM posts");
$sql->execute();
$results=$sql->fetchAll(PDO::FETCH_ASSOC);
echo "<hr>";
foreach($results as $post){
echo "<h2>".$post['post_title']."</h2><br>";
echo $post['post_content']."<br>";
?>
<br><b>Comments</b>
<form id=comment_form_<?php echo $post['post_id']; ?> action="">
<input type=hidden name=pid value=<?php echo $post['post_id']; ?> >
<p><input type=text name=cbody id="comment_body_<?php echo $post['post_id']; ?>" placeholder="Write comment" ></p>
<p><input type=text name= cauth id="comment_author_<?php echo $post['post_id']; ?>" placeholder="Your Name" ></p>
<p><button class="submit_comment" post_id="<?php echo $post['post_id']; ?>" >Submit</button> </p>
</form>
<p><button class="show_comments" post_id="<?php echo $post['post_id']; ?>">Show comments</button></p>
<div id="comments_<?php echo $post['post_id']; ?>">
</div>
<?php
echo "<hr>";
}
?>
<script>
$(document).ready(function() {
$(".show_comments").click(function() {
var post_id=$(this).attr('post_id');
$("#comments_"+post_id).load("comments.php", {
post_id:post_id
});
});
$(".submit_comment").on("click",function() {
var post_id=$(this).attr('post_id');
$.ajax({
data:$('#comment_form_'+post_id).serialize(),
url:'save_comments.php',
async : true,
success: function(){
$("#comments_"+post_id).load("comments.php", {
post_id:post_id
});
}
})
});
});
</script>
&GT;
save_comments.php
<?php
include 'config.php';
$post_id=$_POST['post_id'];
$pid=$post_id;
$sql1=$con->prepare("SELECT * FROM comments where post_id=:pid");
$sql1->bindParam(':pid',$pid);
$sql1->execute();
$results1=$sql1->fetchAll(PDO::FETCH_ASSOC);
foreach($results1 as $comment){
echo "<br><b><cite>".$comment['comment_author']."</cite></b><br>";
echo $comment['comment_body']."<br>";
}
PS:我还是AJAX&amp; amp;的初学者。 jquery的
答案 0 :(得分:0)
您没有将ajax请求定义为POST
,因此不会发送POST变量。
$.ajax({
data:$('#comment_form_'+post_id).serialize(),
url:'save_comments.php',
async : true,
method: 'POST', <---- ADD THIS
success: function(){
$("#comments_"+post_id).load("comments.php", {
post_id:post_id
});
}
})