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

你犯了几个错误。

首先 ::您应该将按钮 type="button"放入 HTML表单代码中第二 ::您的语法错误。 {<1}}应替换为 jQuery AJAX

中的$("#comment").vol();

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

的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

$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中的

尝试用switch case来做。并尝试不直接触摸超级全局，使用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>

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

6 个答案: