如何在不刷新页面的情况下使用 ajax 和 php 插入数据答案

【问题标题】：how to insert data with ajax and php without page refresh如何在不刷新页面的情况下使用 ajax 和 php 插入数据
【发布时间】：2017-04-18 15:10:55
【问题描述】：

我真的需要你的帮助，因为我是 php 和 Ajax 的初学者。我的问题是，我无法通过 post.php 中的附加表单发送数据库中的数据， 同样当 id #reply 的按钮单击时，它会将空数据发送到数据库通过刷新页面。当按下回复链接时，我只会显示回复链接的结果，而没有其他信息（名称和评论）。我需要您的帮助才能使我的附加表单能够在不刷新页面的情况下向数据库添加/发送数据，我还需要禁用 index.php 中的表单以在回复按钮时进行回复/ 链接被按下。谢谢。

post.php

<?php      include("config.php"); //inserting
$action=$_POST["action"];
 if($action=="addcomment"){
      $author = $_POST['name'];
      $comment_body = $_POST['comment_body'];
      $parent_id = $_POST['parent_id'];
  $q = "INSERT INTO nested (author, comment, parent_id) VALUES ('$author', '$comment_body', $parent_id)";
  $r = mysqli_query($conn, $q);
if(mysqli_affected_rows($conn)==1) { header("location:index.php");}
else { }
}   
// showing data  
error_reporting( ~E_NOTICE ); 
function getComments($conn, $row) {
$action=$_POST["action"];
 if($action=="showcomment"){  $id = $row['id'];
    echo "<li class='comment'><div class='aut'>".$row['author']."</div><div class='comment-body'>".$row['comment']."</div>";
    echo "<a href='#comment_fo' class='reply' id='".$row['id']."'>Reply</a>";
$result = mysqli_query($conn, "SELECT * FROM `nested` WHERE parent_id = '$id' ORDER BY `id` DESC"); 
}
if(mysqli_num_rows($result)>0) { echo "<ul>";
    while($row = mysqli_fetch_assoc($result)) { getComments($conn,$row);        }
      echo "</ul>"; } echo "</li>";
}   
 if($action=="showcomment"){
$q = "SELECT * FROM nested WHERE parent_id = '".$row['id']."' ORDER BY `id` DESC";
$r = mysqli_query($conn, $q);
   while($row = mysqli_fetch_assoc($r)){ getComments($conn,$row); }
}
?>
<!DOCTYPE HTML><head><script type='text/javascript'>
$(document).ready(function(){
    $("a.reply").one("click", function() {
        var id = $(this).attr("id");
        var parent = $(this).parent();
      $("#parent_id").attr("value", id);
parent.append(" <br /><div id='form'><form><input type='text' name='name' id='name'><textarea name='comment_body' id='comment_body'></textarea><input type='hidden' name='parent_id' id='parent_id' value='0'><button id='reply'>Reply</button></form></div>");  
     $("#reply").click(function(){
        var name=$("#name").val();
        var comment_body=$("#comment_body").val();
        var parent_id=$("#parent_id").val();
           $.ajax({
                 type:"post",
                 url:"post.php",
                 data:"name="+name+"&comment_body="+comment_body+"&parent_id="+parent_id+"&action=addcomment",
                    success:function(data){ showComment(); }
                 });
              });
     });        
 });
 </script></head></html>

//index.php

<html><head><script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function showComment(){
    $.ajax({
       type:"post",
       url:"post.php",
       data:"action=showcomment",
           success:function(data){ $("#comment").html(data); }
         });
   }
  showComment();
$(document).ready(function(){
   $("#button").click(function(){
        var name=$("#name").val();
        var comment_body=$("#comment_body").val();
        var parent_id=$("#parent_id").val();
           $.ajax({
                 type:"post",
                 url:"post.php",
                 data:"name="+name+"&comment_body="+comment_body+"&parent_id="+parent_id+"&action=addcomment",
                    success:function(data){
                 showComment();             
                     }
                 });
             });
});
</script></head><body>
<form id="form_comment">
  <input type="text" name="name" id='name'/>
  <textarea name="comment_body" id='comment_body'></textarea>
  <input type='hidden' name='parent_id' id='parent_id' value='0'/>
  <input type="button" id="button" value="Comment"/>
</form>
<div id="comment"></div> </body></html>

【问题讨论】：

您的脚本易受 SQL 注入攻击。在继续之前，您应该了解PDO、准备好的语句以及如何filter user input。
确实如此，谢谢您的建议。杰森老板。但是，请帮我解决这个问题。

标签： php ajax

【解决方案1】：

$(document).ready(function(){
  $("#button").click(function(e){
      e.preventDefault();  //add this line to prevent reload
      var name=$("#name").val();
      var comment_body=$("#comment_body").val();
      var parent_id=$("#parent_id").val();
      $.ajax({
             type:"post",
             url:"post.php",
             data:"name="+name+"&comment_body="+comment_body+"&parent_id="+parent_id+"&action=addcomment",
                success:function(data){
             showComment();             
                 }
             });
         });
});

【讨论】：

谢谢，但是 $("#reply").click(function(){ } 怎么样？因为我有问题
同把 $("#reply").click(function(e){ e.preventDefault(); }
我对两个页面都这样做了，以防止默认提交，但没有任何改变，我仍然得到空结果，我的意思是评论工作完美，但问题出在回复表单上
在你的 ajax 调用之前尝试 alert(name + comment_body + parent_id) 如果你会得到任何值
有任何反馈吗？你有任何警报吗？

【解决方案2】：

这是一个简单的不完整 ajax 示例。

FromPage.php

这是我要使用的 ajax。变量可以随意设置。

<script type="text/javascript">
        var cars = ["Saab", "Volvo", "BMW"];
        var name = "John Smith";

        $.ajax({
                url: 'toDB.php',
                type: 'post',
                dataType: 'html',
                data: {
                        carArray: cars, 
                        firstName: name 
                },
                success: function(data) {
                        console.log(data); //Testing
                }
        });

</script>

toDB.ph

这是第二页 - 将值写入数据库等的页面。

<?php
    $cars = $_POST['carArray'];
    $FirstName=$_POST['firstName'];

    //Used to test - it will print out the array
    print("<pre>");
    print_r($cars);
    print("</pre>");

    //Do something with $cars array and $FirstName variable
?>

【讨论】：

谢谢。所有你可以看到我正在尝试从 arleady 通过 ajax 调用的文件中调用表单，所以，我想通过使用 post.php 中的附加表单将数据发送到数据库来使其发挥作用