php - jQuery关于提交问题

Question

由于某种原因，我的提交事件不起作用，但是，如果我将其更改为单击表单，它会起作用，这是我的代码：

查询：

 <script>
(function(){
        $('form').on('click',function(){

                $.post("../includes/register.php",  $('form').serialize(),
                function(data){
                    $('body').append(data);                 
                });
        });
    })();
</script>

注册.PHP：

<?php 

if(isset($_POST['username'])){
echo $_POST['username'];
}
?>

这工作得很好，每当我点击表单文本输入时，它都会附加用户名，但是，当我尝试使用提交方法时，它不会输出任何内容：

<script>
(function(){
        $('form').submit(function(){

                $.post("../includes/register.php",   $('form').serialize(),
                function(data){
                    $('body').append(data);                 
                });
        });
    })();
</script>

事实上，当我使用 button.on('click') 时它甚至都不起作用

Answer 1

您正在使用立即调用的函数而不是文档就绪处理程序，您还应该阻止事件的默认操作，请尝试以下操作：

$(function(){
    $('form').on('submit',function(event){
        event.preventDefault();
        $.post("../includes/register.php",  $(this).serialize(),
        function(data){
            $('body').append(data);                 
        });
    });
});

Answer 2

默认情况下，表单将提交到表单的操作。您需要防止这种情况发生。您正在通过 ajax 等待服务器响应，因此您很可能永远不会在默认操作发生之前看到您的回调执行。

$('form').submit(function(e){
            e.preventDefault(); // put this first
            $.post("../includes/register.php",   $('form').serialize(),
            function(data){
                $('body').append(data);                 
            });
    });

Answer 3

这是现在的猜测，因为我不知道您的 HTML 代码是什么样的。

但是在提交时表单将被提交，并且任何活动的 ajax 请求都将被取消。尝试类似的东西

<script>
(function(){
   $('form').submit(function(){    
     $.post("../includes/register.php",   $('form').serialize(),
       function(data){
         $('body').append(data);                 
     });
     return false;
   });
  })();
</script>

这将停止提交事件，您应该让发布事件发生。虽然它实际上不会提交表单。因此，您必须手动执行此操作。