如何使用AJAX提交表單？

Question

我正在嘗試使用Ajax提交表單。 但是，它沒有顯示代碼錯誤的消息。 我以相同的方式在整個網站上推送錯誤，以便該部分正常工作。 這是我的代碼：

<script type="text/javascript" src="jquery.js"></script>
<div id="showerrors"></div>
<script type="text/javascript">
  $(document).ready(function() {
    setInterval(function () {
      $('#showerrors').load('errors2.php')
    }, 1000);
  });
</script>   
<form id="formoid" method="post" action="data/newpass.php">
<div class="row2">
  <input type="email" class="form-control2" placeholder="email adres" aria-describedby="basic-addon1" name="email" required>
</div>
<div class="row2">
  <input type="text" class="form-control2 pull-left" placeholder="Enter code" aria-describedby="basic-addon1" name="captcha" style="width: 70%;" required>
  <div class="capbg1">
    <input type="text" class="disable1b pull-right" value="<?php echo $capcode3;?>" name="captcha" style="width: 29%;" disabled>
  </div>  
</div>  
<div class="row2"></div>
<div class="row2">
  <button type="submit" class="w3-black pull-left" name="req_new_pw">Request new password</button>
</div>
</form>
<script type='text/javascript'>
    $("#formoid").submit(function(event) {
      event.preventDefault();
      var $form = $( this ),
          url = $form.attr( 'action' );
      $.ajax({
        type: "POST",
        url: "data/newpass.php",
        data : { email: $('#email').val(), captcha: $('#captcha').val() },
      });
    });
</script>

// newpass.php-動作形式

<?php
    error_reporting(E_ALL);
    session_start();  
    ob_start();
    $db = mysqli_connect(***);

    if (isset($_POST['req_new_pw'])) 
    {
        $captcha = mysqli_real_escape_string($db, $_POST['captcha']);
        $email = mysqli_real_escape_string($db, $_POST['email']);
        if(isset($_SESSION['capcode3']))
        {
          if($_SESSION['capcode3'] != $captcha)
          {
            array_push($errors, "- Code is incorrect.");
          }
        }     
    }
?> 

//errors.php

<?php  if (count($errors) > 0) : ?>
  <div class="isa_error">
     <i class="fa fa-times-circle"></i>
       <b>Oops..</b><br>
    <?php foreach ($errors as $error) : ?>
      <p><?php echo $error ?></p>
    <?php endforeach ?>
  </div>
<?php  endif ?>

//errors2.php-在表格上方顯示錯誤

<?php 
 include('errors.php'); 
 if (isset($_SESSION['success'])) : ?>
  <div class="error success" >
    <h3>
      <?php
          echo $_SESSION['success']; 
          unset($_SESSION['success']);
        ?>
      </div>
    </h3>
  </div>
<?php endif ?>

當我提交表格時，沒有任何反應。 我究竟做錯了什么？

Answer 1

您不發送$_POST['req_new_pw'] ，而是詢問是否設置了該值。 您可以使用serialize()通過郵寄發送所有表單元素：

<script type='text/javascript'>
    $("#formoid").submit(function(event) {
      event.preventDefault();
      var $form = $( this ),
          url = $form.attr( 'action' );
      $.ajax({
        type: "POST",
        url: "data/newpass.php",
        data : $('#formoid').serialize(),
      });
    });
</script>

確保您設置了$_SESSION['capcode3'] 。

Answer 2

這就像一個魅力：

$("#formoid").submit(function(event) {
      event.preventDefault();
      var form_data = $(this).serialize(); //Encode form elements for submission

      $.ajax({
            type: "POST",
            url : "data/newpass.php/",
            data : form_data 
        });
    });