WordPress 前端简单的 Ajax 表单不起作用

Question

几个小时以来，我一直无法弄清楚这一点。我对 Ajax 相当熟悉，我希望我只是缺少一些明显的东西。请救救我的头发！

在functions.php中

// Quote box
function ajax_quotebox_init(){

    wp_register_script('ajax-quotebox-script', get_template_directory_uri() . '/ajax-quotebox-script.js', array('jquery') ); 
    wp_enqueue_script('ajax-quotebox-script');

    wp_localize_script( 'ajax-quotebox-script', 'ajax_quotebox_object', array( 
        'ajaxurl' => home_url( 'wp-admin/admin-ajax.php' ),
        'redirecturl' => home_url(),
        'loadingmessage' => __('Processing, please wait...')
    ));

    // Enable the user with no privileges to run ajax_quotebox() in AJAX
    add_action( 'wp_ajax_nopriv_ajax_quotebox', 'ajax_quotebox' );
}
add_action('init', 'ajax_quotebox_init');

function ajax_quotebox() {

    // First check the nonce, if it fails the function will break
    //check_ajax_referer( 'ajax-quotebox-nonce', 'security' );

    $first_name = sanitize_text_field($_POST['first_name']);
    $last_name = sanitize_text_field($_POST['last_name']);
    $vehicle = sanitize_text_field($_POST['vehicle']);
    $phone = sanitize_text_field($_POST['phone']);
    $zip = sanitize_text_field($_POST['zip']);

    // Nonce is checked?? get the POST data and sign user on
    if ($first_name !== 'Joe'){
        echo json_encode(array('message'=>__('Did not get "Joe" for first_name')));
    } else {
        echo json_encode(array('message'=>__('Form successful, redirecting...')));
    }

    die();
}

形式：

<div class="quotebox-container">
    <h3 class="wow animate bounceIn">Get <span>Ca$h</span> Now!</h3>
    <hr>
    <form id="quotebox" action="quotebox" method="post">

    <div class="row">
        <div class="col-xs-6 col-sm-6 col-md-6">
            <div class="form-group">
                <input type="text" name="first_name" id="first_name" class="form-control input-sm" placeholder="First Name">
            </div>
        </div>
        <div class="col-xs-6 col-sm-6 col-md-6">
            <div class="form-group">
                <input type="text" name="last_name" id="last_name" class="form-control input-sm" placeholder="Last Name">
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <input type="text" name="vehicle" id="vehicle" class="form-control input-sm" placeholder="Vehicle (ex: 2009 Honda Civic EX)">
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-7 col-sm-7 col-md-7">
            <div class="form-group">
                <input type="text" name="phone" id="phone" class="form-control input-sm" placeholder="Phone Number">
            </div>
        </div>
        <div class="col-xs-5 col-sm-5 col-md-5">
            <div class="form-group">
                <input type="text" name="zip" id="zip" class="form-control input-sm" placeholder="Zip Code">
            </div>
        </div>
    </div>

    <button type="submit" id="submit" name="submit" class="btn btn-primary btn-lg btn-block c-btn-square quote quotebox-submit" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Processing"><i class="fa fa-hand-o-right wow animate fadeIn"></i> Tell Me How Much</button>

    <p class="status"></p>

    <?php wp_nonce_field('ajax-quotebox-nonce', 'security') ?>

    </form>

    <div class="quote-help">
        We'll contact you promptly with an amazing quote!
    </div>
</div>

在 ajax-quotebox-script.js 中

jQuery(document).ready(function($) {

    // Perform AJAX quotebox action on form submit
    $('form#quotebox').on('submit', function(e){
        $('form#quotebox p.status').show().text(ajax_quotebox_object.loadingmessage);
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: ajax_quotebox_object.ajaxurl,
            data: { 
                'action': 'ajax_quotebox', //calls wp_ajax_nopriv_quote_box
                'first_name': $('#first_name').val(), 
                'last_name': $('#last_name').val(), 
                'vehicle': $('#vehicle').val(),
                'phone': $('#phone').val(),
                'zip': $('#zip').val(),
                'security': $('form#quotebox #security').val() },
            success: function(data){
                $('p.status').text(data.message);
                $('.submit').button('reset');
            }
        });
        e.preventDefault();
    });

});

我从表单中获得的唯一数据：

action:ajax_quotebox
first_name:
last_name:
vehicle:
phone:
zip:
security:fcf393d8d8

Answer 1

e.preventDefault();应该像这样在函数的顶部：

jQuery(document).ready(function($) {

    // Perform AJAX quotebox action on form submit
    $('form#quotebox').on('submit', function(e){
        //At the top to prevent the default action before the form data is parsed.
        e.preventDefault();

        $('form#quotebox p.status').show().text(ajax_quotebox_object.loadingmessage);
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: ajax_quotebox_object.ajaxurl,
            data: { 
                'action': 'ajax_quotebox', //calls wp_ajax_nopriv_quote_box
                'first_name': $('#first_name').val(), 
                'last_name': $('#last_name').val(), 
                'vehicle': $('#vehicle').val(),
                'phone': $('#phone').val(),
                'zip': $('#zip').val(),
                'security': $('form#quotebox #security').val() },
            success: function(data){
                $('p.status').text(data.message);
                $('.submit').button('reset');
            }
        });
    });
});

您也可以将按钮类型更改为仅“按钮”，因为我们不需要提交操作，但这可能不是有效的或可访问性的最佳实践，即使它会起作用。

编辑 我查看了您的页面源代码，您有多个 id="first_name" 的输入。您不能在多个位置拥有一个 ID。具有相同 ID 的附加字段似乎处于模式中，但由于它们具有相同的 ID，因此仍会引起混淆。这适用于所有字段。