如何使用AJAX提交表单?

时间:2019-01-20 20:29:43

标签: javascript php jquery html ajax

我正在尝试使用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 ?>

当我提交表格时,没有任何反应。 我在做什么错了?

2 个答案:

答案 0 :(得分:0)

您没有发送$_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']

答案 1 :(得分:-1)

这就像一种魅力:

$("#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 
        });
    });