如何在不刷新页面的情况下发布数据（窗体）PHP，jQuery，Ajax

Question

请帮助我如何提交表单（评论）而无需刷新页面

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>

PHP代码（ pnf.php ）：

if(isset($_POST["compost"]))
{
    $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";
    }
}

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无法正常工作，请任何人帮助-预先感谢

Answer 1

您犯了几个错误。

首先 ::您应该在HTML表单代码中添加 button type="button"
Second ::您犯了语法错误。 $("#comment").vol(); 应该替换为$("#comment").val(); 在您的jQuery AJAX中

Answer 2

正如您提到的那样，您必须在不刷新页面的情况下发送请求，因此我修改了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) {
            }
        })
    });
}); 

Answer 3

修改后的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>

Answer 4

Java脚本

$('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

$action = filter_input(INPUT_GET, 'action');
swicht($action){
  case 'compost':
    $comment = filter_input(INPUT_POST, 'comment');
    {
        $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)
    {
      http_response_code(400);
      echo 'internal error';        
    } 
    echo 'your data will be saved';
    break;
  default:
    http_response_code(404);
    echo 'unknown action';
}

您必须阻止表单上的提交（使用javascript）。

之后，您将请求发送到服务器，然后等待成功或错误。

在PHP中尝试用开关盒来做到这一点。 并尝试不直接触摸超级全局变量，请使用filter_input函数。

希望这可以帮助

Answer 5

<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>

脚本

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

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

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

PHP代码（pnf.php）：

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";
    }

Answer 6

如果使用的是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>