无法使用AJAX将数据插入到mysql数据库中

时间:2017-11-17 13:03:49

标签: php jquery ajax

我正在创建一个类似于项目的时间轴,允许在帖子上写评论。但是我无法插入数据。评论按预期显示。表单值似乎没有传递到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的

1 个答案:

答案 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
       }); 
  }
})