如何在不刷新頁面的情況下發布數據（窗體）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>