使用ajax将表单提交给php而不刷新页面

Question

有人可以告诉我为什么这段代码不起作用我想通过 post 方法将表单数据发送到 PHP，但是我的 PHP 没有收到任何请求 这是我的注册表单 signupmodal.php

  <form action="<?php htmlentities($_SERVER['PHP_SELF']) ?>" method="post" id="signupForm">
                    <div class="form-group">
                        <label for="forUserName">User Name:</label>
                        <input type="text" name="username" id="username" class="form-control" placeholder="Enter User Name" aria-describedby="helpId">
                    </div>
                    <div class="form-group">
                        <label for="forEmail">Email:</label>
                        <input type="email" name="email" id="email" class="form-control" placeholder="Enter Your Email" aria-describedby="helpId">
                    </div>
                    <div class="form-group">
                        <label for="">password:</label>
                        <input type="password" name="password" id="password" class="form-control" placeholder="Enter Password" aria-describedby="helpId">
                    </div>
                    <div class="form-group">
                        <label for="forConfirmPassword">Confirm Password</label>
                        <input type="password" name="cpassword" id="cpassword" class="form-control" placeholder="Enter Confirm Password" aria-describedby="helpId">
                    </div>
                    <input type="submit" class="btn btn-primary" value="SignUp" id="subbtn" onclick="myFunction()">
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
            <?php echo json_encode($_POST);
            // echo $_POST['email'];
            if ($_SERVER['REQUEST_METHOD'] == 'POST') {
                $username = $_POST['username'];
                $email = $_POST['email'];
                $password = $_POST['password'];
                $cpassword = $_POST['cpassword'];
                echo $username;
                if ($password == $cpassword) {
                    //code
                } else
                    echo '<div class="alert alert-danger" role="alert">
<strong>danger</strong>
</div>';
            } ?>
        </div>

script.js


function myFunction() {
  console.log(window.location.href);
  $('form').on('submit', function (event) {
    $.ajax({
      type: 'POST',
      url: 'includes/signupmodal.php',
      data: $('form#signupForm').serialize(),
      success: function () {
        data = $('form#signupForm').serialize();
        console.log(data);
      },
    });
    event.preventDefault();
  });
}

我想在不加载页面的情况下使用 ajax 提交我的数据，所以请告诉我哪里错了

Answer 1

您仅在单击提交按钮时才运行myFunction()，到那时添加 submit 事件侦听器为时已晚。

我建议你在文档准备好后添加你的监听器。

从您的提交按钮中删除 onclick="myFunction()" 并将其添加到您的脚本中

jQuery(function() {
  myFunction() // executes when the document has completely loaded
})

// or even just
// jQuery(myFunction)

见https://api.jquery.com/jquery/#jQuery3