Ajax表单提交而不刷新页面

Question

我只是想用 ajax 将我的表单提交到同一个页面而不刷新页面。所以我下面的代码提交了表单，但没有选择 $_POST 值......我是否正确提交了它。我没有收到任何错误，但我认为我的表单没有提交。

html表单

<form action="" id="fixeddonation" name="fixeddonation" method="post">


<input type="hidden" class="donerProject" name="donerProject" value="test">
<input type="hidden" class="donersubProject" id="donersubProject" name="donersubProject" value="general">
<input type="hidden" class="donerLocations" id="donerLocations" name="donerLocations" value="general">

<input type="hidden" class="donationpagetype" name="donationpagetype" value="general">
<input type="hidden" class="projectadded" id="projectadded" name="projectadded" value="1">
<input type="hidden" value="302" id="pageid" name="pageid">
<div class="classsetrepet generalfixshow  fullrow row fixed-page">
<div class="col-6 text-right">      
<div class="prize">Fixed  Amount £</div>    
</div>
<div class="col-6"> 
<input type="text" id="oneoffamt" name="oneoffamt" class="oneoffamt validatenumber">
<span class="amt_error"></span>
</div>
</div>

<br>
<div class="row">
<div class="col-6"></div>
<div class="col-6">
<input type="submit" id="submit_gen_one" class="btn-block" value="submit" name="submit_gen_one">
</div>
</div>
</form>

Ajax 代码

jQuery('#fixeddonation').on('submit', function (e) {

        e.preventDefault();

        jQuery.ajax({
            type: 'post',
            url: 'wp-admin/admin-ajax.php',
            data: jQuery('#fixeddonation').serialize(),
            success: function (data) {
                alert(data);
                alert('form was submitted');
                jQuery('#collapse2').addClass('in').removeAttr('aria-expanded').removeAttr('style'); jQuery('#collapse1').removeClass('in').removeAttr('aria-expanded').removeAttr('style');

            }
        });
        return false;
    });

Answer 1

首先创建模板

<?php
/* Template Name: Test */

get_header();
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

    <div id="primary" class="content-area">
        <main id="main" class="site-main">
    <p class="register-message" style="display:none"></p>
      <form action="#" method="POST" name="testregister" class="register-form">
      <fieldset> 
          <label><i class="fa fa-file-text-o"></i> Register Form</label>

          <input type="text"  name="firstname" placeholder="Username" id="firstname">
          <p id="firstname-error" style="display:none">Firstname Must Be Enter</p>
          <input type="email"  name="email" placeholder="Email address" id="email">
          <p id="email-error" style="display:none">Email Must Be Enter</p>
          <input type="submit"  class="button" id="test" value="Register" >
      </fieldset>
    </form> 
    <script type="text/javascript">
      jQuery('#test').on('click',function(e){
        e.preventDefault();
        var firstname = jQuery('#firstname').val();
        var email = jQuery('#email').val();
         if (firstname == "") {
             jQuery('#firstname-error').show();
            return false;
        } else {
            jQuery('#firstname-error').hide();

        }
        if (email == "") {   jQuery('#email-error').show();     return false;   } 
        else { jQuery('#email-error').hide();   }

        jQuery.ajax({
          type:"POST",
          url:"<?php echo admin_url('admin-ajax.php'); ?>",
          data: {
            action: "test",
            firstname : firstname,
            email : email
          },
          success: function(results){
            console.log(results);
            jQuery('.register-message').text(results).show();
          },
          error: function(results) {

          }
        });
      });
    </script>


        </main><!-- #main -->
    </div><!-- #primary -->

之后创建一个函数（wordpress 中的function.php）

add_action('wp_ajax_test', 'test', 0);
add_action('wp_ajax_nopriv_test', 'test');
function test() {
      $firstname = stripcslashes($_POST['firstname']);
      $email = stripcslashes($_POST['email']);

       global $wpdb;

    $q = $wpdb->prepare("SELECT * FROM wp_test WHERE email='".$email."' ");
    $res = $wpdb->get_results($q);
   if(count($res)>0)
   {
       echo "Email Allready Register ";
   }
    else
    {
      $user_data = array(
          'firstname' => $firstname,
          'email' => $email
        );
         $tablename = $wpdb->prefix.'test'; // if use wordpress
         $user_id= $wpdb->insert( $tablename,$user_data );
         echo 'we have Created an account for you';
    die;
    }
}

Answer 2

将正确的值添加到表单的操作标记并尝试以下操作：

<script>

 $(document).ready(function() {

 var form = $('#fixeddonation');

  form.submit(function(ev) {
   ev.preventDefault();


     var formData = form.serialize();
     $.ajax({
        method: 'POST',
        url:  form.attr('action'),
        data:  formData
    }) .done(function(data) {
        alert(data);
  });
  });

}); // end .ready()

</script>

不需要 return false，因为您已经首先调用了 preventDefault()