成功提交表单后，jQuery AJAX将显示网页

Question

我有一个PHP表单正在通过AJAX Jquery发送。 表单是通过AJAX JQuery成功发送的，但是显示成功消息或发送表单时会显示网页。 造成此问题的确切原因可能是什么。

<? php include_once 'config.php'; if(isset($_POST) && !empty($_POST)) { $staff_number=$ _POST[ 'staff_number']; $department=$ _POST[ 'department']; $stmt=$ link->prepare("INSERT INTO `staffs` (`staff_name`,`department`) VALUES (?,?)"); $stmt->bind_param('ss',$staff_name, $staff_number, $designation, $department); if ($stmt->execute()){ echo "<span style='background-color:#69d052; 

padding:6px; 
            color:white; font-size:13px;border-radius:5px;'>Staff created 
               successfully. </span>"; } else{ echo "
<p align=center>Error inserting data.</p>"; echo mysqli_error($link); } } ?>
<!DOCTYPE html>

<body>
    <div class="container">
        <div class="col-md-7 col-md-offset-3">
            <form action="" method="post" autocomplete="off" id="my_form">
                <div class="form-group">
                    <label>Staff Name</label>
                    <input type="text" required="true" name="staff_name" class="form-control" value="">
                </div>
                <div class="form-group">
                    <label>Department</label>
                    <input input="text" name="department" class="form-control" value="">
                </div>
                <div class="message_box" style="margin:50px 0px;">
                </div>
                <br>
                <input type="submit" class="btn btn-success" value="Add">
            </form>
        </div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/   libs/jquery/1.3.0/jquery.min.js"></script>
        <script>
            $(function() {
                $('form').on('submit', function(e) {
                    e.preventDefault();
                    $('.message_box').html('Processing...');
                    $.ajax({
                        type: 'post',
                        data: $('form').serialize(),
                        success: function(data) {
                            $('.message_box').html(data).fadeIn('slow');
                            $("#my_form")[0].reset();
                        }
                    });

                });

            });
        </script>
</body>

</html>

Answer 1

成功后，您可能正在从服务器端（PHP） 重定向请求。 这就是显示页面的原因。

Answer 2

在您的ajax调用中，您没有设置url属性，默认情况下，它将被设置为当前页面，这就是为什么您可能要获取页面的原因。

尝试将您的网址添加到您的Ajax中...

$.ajax({
     url: '..my ajax url.....', 
     type: 'post',
     data: $('form').serialize(),
     success: function(data) {
      $('.message_box').html(data).fadeIn('slow');
      $("#my_form")[0].reset();
     }
    });

成功提交表单后，jQuery AJAX将显示网页

问题描述

2 个解决方案

解决方案1
1 2019-05-23 13:31:35

解决方案2
0 2019-05-23 12:47:19

成功提交表单后，jQuery AJAX将显示网页

问题描述

2 个解决方案

解决方案1 1 2019-05-23 13:31:35

解决方案2 0 2019-05-23 12:47:19

解决方案1
1 2019-05-23 13:31:35

解决方案2
0 2019-05-23 12:47:19