如何在不刷新页面的情况下发布数据（表单）PHP、jQuery、Ajax

请帮助我如何在不刷新页面的情况下提交表单（评论）

HTML标记：

<form id="commentf" method="post">
    <img width="40px" height="40px" src="uploads/<?php echo $row['photo']; ?>">
    <textarea class="textinput"id="comment" rows="1" name="comments" placeholder="Comment Here......"></textarea>
    <button type="submit" id="comq"name="compost" class="butn2">post comment</button>
</form>

jQuery和Ajax：

$(document).ready(function()
{
     $("#comq").click(function() {
         var comment=$("#comment").val();

         $.ajax({
             type: "POST",
             url:"pnf.php",
             data: { 
             "done":1,
             "comments":comment

              },
             success: function(data){
             }
        })
    }); 
}); 

---

我已经试过很多次了，不知道我犯了什么错误，Ajax和jQuery都不起作用，请任何人帮助-提前感谢你犯了几个错误

首先：：您应该将按钮

type=“button”

放在您的HTML表单代码中

---

Second：：您犯了语法错误<代码>$（“#注释”）.vol（）应替换为

$（“#注释”）.val（）在您的jQuery AJAX中
正如您提到的，您必须在不刷新页面的情况下发送请求，我修改了您的JS代码，以防止默认提交表单：

$(document).ready(function () {
    $("#commentf").submit(function (e) {
        e.preventDefault();
        var comment = $("#comment").val();

        $.ajax({
            type: "POST",
            url: "pnf.php",
            data: {
                "done": 1,
                "comments": comment
            },
            success: function (data) {
            }
        })
    });
}); 

修改的JQuery代码

$( document ).ready(function() {
    console.log( "ready!" );

    $("#comq").click(function() {
        var comment=$("#comment").val();

        console.log('comment : '+comment);

        $.ajax({
            type: "POST",
            url:"pnf.php",
            data: {
                "done":1,
                "comments":comment
            },
                success: function(data){
            }
        })
    });

});

HTML代码

<form id="commentf" method="post">
    <textarea class="textinput" id="comment" rows="1" name="comments" placeholder="Comment Here......"></textarea>
    <input type="button" id="comq" name="compost" class="butn2" value="Post Comment">
</form> </div>


Javascript

$('form').on('submit', function(event){
  event.preventDefault();
  event.stopPropagination();

  var dataSet = {
    comment: $('#comment').val();
  }

  $.ajax({
    url: "link.to.your.api/action=compost",
    data: dataSet,
    method: 'post',
    success: function(data){
      console.log('request in success');
      console.log(data);
    },
    error: function(jqXHR) {
      console.error('request in error');
      console.log(jqXHR.responseText');
    }
  });
});

PHP

您必须防止表单上的提交（查看javascript）

然后将请求发送到服务器并等待成功或错误

在php中，尝试使用开关盒来实现。尽量不要直接触摸超全局，使用filter_输入功能

希望这有帮助

<form id="commentf" method="post">
    <img width="40px" height="40px" src="uploads/<?php echo $row['photo']; ?>">
    <textarea class="textinput"id="comment" rows="1" name="comments" placeholder="Comment Here......"></textarea>
    <button type="button" id="comq"name="compost" class="butn2">post comment</button>
</form>

PHP代码（pnf.PHP）：

如果使用jquery，请确保在脚本文件之前包含jquery库

最新jquery cdn精简版

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>



范例

<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>

<script src="yourjsfile.js" type="text/javascript"></script>


$（“注释”）.vol（）->
$（“#注释”）.val（）解释“不工作”…错误？？您的控制台应该已经发现错误。在开发时，请始终使用控制台和网络选项卡是，但仍与
e.preventDefault（）相同并不总是最好的选择。@Rana Ghosh在这种情况下它会起作用。因为我阻止提交事件-不点击按钮，我知道它会起作用。但我是说这不是最好的做法。当所有通道都关闭时，应该这样做。喜欢使用HTML按钮
type=“Button”
@Rana Ghosh，那么type=Button会有什么帮助呢？我知道。这就是我这么说的原因。我用$（“#comment”）.val（）替换了它，但没有相同的结果change@MunnaVMC同样，请对第一个选项进行相同的操作。按钮类型=按钮？哦，我的错误。我已经纠正了那个错误。你现在可以查一下。它在我的Chrome浏览器中工作。在我的浏览器控制台中，我仍然可以看到AJAX调用。虽然它返回404错误，因为我的案例中没有服务器端文件。你的案子怎么了？你这边怎么了？你不能在你的浏览器控制台中看到任何ajax调用发生。使用按钮点击提交你的代码没有问题，必须是button type=“button”button type=“button”它的工作原理你可以测试它吗请已经测试了，你只需要点击按钮进行ajax调用，就是这样。你不需要自己提交表格！
$(document).ready(function()
{
     $("#comq").click(function() {
         var comment=$("#comment").val();

         $.ajax({
             type: "POST",
             url:"pnf.php",
             data: { 
             "done":1,
             "comments":comment

              },
             success: function(data){
             }
        })
    }); 
});

comment=$_POST['comments'];
$reslt_user= mysqli_query($connection,"SELECT * FROM tbl_users,`queries` where id='".$_SESSION['id']."' AND  qid= '".$qid."' ");
        $row_lat_lng= mysqli_fetch_array($reslt_user);
        $stmt = mysqli_query($connection,"INSERT INTO comments set uid='".$_SESSION['id']."',comments='".$comment."',reply='".$reply."' ,
        qid= '".$qid."' ");
    if($stmt)
    {
        echo "hello world";
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>

<script src="yourjsfile.js" type="text/javascript"></script>