Question

通过AJAX插入数据可以正常工作，但页面刷新，为什么给出反馈来解决此问题。

这是我的ajax代码

 <script>
        $(document).ready(function(){
            $("#button").click(function(){

                var postId=$("#postId").val();
                var userId=$("#userId").val();
                var postComm=$("#postComments").val();

                $.ajax({
                    url:'../validate/inserPostComm.php',
                    method:'POST',
                    data:{
                        poId:postId,
                        usId:userId,
                        poco:postComm
                    },
                   success:function(data){
                       //alert(data);
                   }
                });
            });
        });
    </script>

我在这里使用HTML

<form>
<input type="hidden" id="postId" name="postId" value="<?php echo $_GET["postId"]; ?>">
<input type="hidden" id="userId" name="userId" value="<?php echo $_SESSION["u_id"]; ?>">
<textarea placeholder="Post your comment" id="postComments"></textarea>
<button type="submit" id="button"><i class="fa fa-paper-plane"></i></button>
</form>

Answer 1

由于按钮的输入类型为“提交”，您正面临着它。

<button type="submit" id="button"><i class="fa fa-paper-plane"></i></button>

只需将其更改为普通的“按钮”即可

<button type="button " id="button"><i class="fa fa-paper-plane"></i></button>

Answer 2

轻松修复：添加了preventDefault（）。请注意，我在您的点击功能中添加了“ e”。

<script>
        $(document).ready(function(){
            $("#button").click(function(e){
              e.preventDefault();

                var postId=$("#postId").val();
                var userId=$("#userId").val();
                var postComm=$("#postComments").val();

                $.ajax({
                    url:'../validate/inserPostComm.php',
                    method:'POST',
                    data:{
                        poId:postId,
                        usId:userId,
                        poco:postComm
                    },
                   success:function(data){
                       //alert(data);
                   }
                });
            });
        });
    </script>

Answer 3

我正在使用另一个ajax，但即将出现的一些问题是页面刷新。

<script>
    function inspire(x){
        var insPer =$("#insPer"+x).val();
        var insPos =$("#insPos"+x).val();


        $.ajax({
            url:'../validate/inspire.php',
            method:'POST',
            data:{
                u_id:insPer,
                p_id:insPos
            },
           success:function(data){
               //alert(data);
           }
        });
    }
</script>

这是html代码

<input type="hidden" id="insPer<?php echo $p_id; ?>" name="insPer" value="<?php echo $_SESSION["u_id"]; ?>"> 

<input type="hidden" id="insPos<?php echo $p_id; ?>" name="insPos" value="<?php echo $p_id; ?>">

<a href="#" onclick="inspire(<?php echo $p_id; ?>);">

Answer 4

您可以阻止默认的“提交”按钮行为-使用event.preventDefault();

提交表单

 <script>
    $(document).ready(function(){
        $("#button").click(function(event){
            // prevent the default submit button behaviour
            event.preventDefault();
            var postId=$("#postId").val();
            var userId=$("#userId").val();
            var postComm=$("#postComments").val();

            $.ajax({
                url:'../validate/inserPostComm.php',
                method:'POST',
                data:{
                    poId:postId,
                    usId:userId,
                    poco:postComm
                },
               success:function(data){
                   //alert(data);
               }
            });
        });
    });
</script>

Answer 5

最好这样做

$(document).ready(function(){
    	$("form#comment").submit(function(e) {
            e.preventDefault();    
              var formData = new FormData(this);
              // console.log(formData);
              $.ajax({
                  url: '../validate/inserPostComm.php',
                  type: 'POST',
                  data: formData, //The Form data contain array (postId,userId,postComments)
                  success: function (data) {
                      // do something if success
                  },
                  error: function(xhr, ajaxOptions, thrownError) {
                      //If error thrown here
                  }
            });
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="comment" method="post" enctype="multipart/form-data">
<input type="hidden" id="postId" name="postId" value="...">
<input type="hidden" id="userId" name="userId" value="...">
<textarea placeholder="Post your comment" id="postComments" name="postComments"></textarea>
<button type="submit" id="button"><i class="fa fa-paper-plane"></i></button>
</form>

通过AJAX页面插入令人耳目一新

5 个答案: