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

Posted 2023-03-05

【中文标题】使用ajax将表单提交给php而不刷新页面

【英文标题】：Form submit with ajax passing form to php without page refresh

【发布时间】：2021-09-26 11:45:24

【问题描述】：

有人可以告诉我为什么这段代码不起作用我想通过 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 提交我的数据，所以请告诉我哪里错了

【问题讨论】：

您遇到了什么问题？

当我提交表单时，我的 php 不会获取我通过 ajax 发送的数据

是否由于默认表单提交而重新加载页面？如果不是 - 检查浏览器开发工具网络中的实际请求，以查看发送的内容是预期的内容、请求状态、响应等。您需要将其缩小到更具体的代码部分是否有效。您没有提供足够的调试细节

在开发工具中的状态是 200 ok 并且所有的输入也都在那里我猜我的 PHP 代码有一些问题但是当我使用正常的方法来放置数据时我的 PHP 代码运行完美

【参考方案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

【讨论】：

有趣的是，实际上还不算太晚，但如果多次使用提交按钮，则有可能添加多个侦听器。 jsfiddle.net/fv27a539

@charlietfl 非常有趣。老实说，在添加新的事件侦听器之前，我会认为提交事件会顺利进行

我也不确定，因为我几乎从不使用按钮单击表单，但出于好奇决定对其进行测试。有点道理，在点击事件完成之前添加监听器