Ajax not working properly

时间:2018-02-02 作者:indigo

我正在制作一个Ajaxing表单。此表单是自定义页面模板。数据的保存工作正常,但当表单提交时,页面会重定向到websiteurl/wp-admin/admin-ajax.php 带有白色空白页。我想要的是防止重新加载页面。我没有收到来自的任何错误消息error function.

如何修复此问题?

HTML

<form method="POST" action="<?php echo admin_url(\'admin-ajax.php\'); ?>" id="modal-form-ajax" autocomplete="off">
        <input type="hidden" name="form_title" value="Resume"/>
        <input placeholder="Last Name*" type="text" name="lastName" id="lastName" value="" required data-selectable="true">
        <input placeholder="First Name*" type="text" name="firstName" id="firstName" value="" required data-selectable="true">
        <input placeholder="Email Address" type="email" name="Email" id="Email" onblur="this.setAttribute(\'value\', this.value);" value="" required data-selectable="true">
        <input placeholder="Mobile Number*" type="text" name="contactNumber" id="contactNumber" onkeypress="return isNumberKey(event)" value="" size="11" minlength="11" maxlength="11" pattern ="^09\\d{9}$" oninvalid="this.setCustomValidity(\'Please enter your 11-digits Philippine mobile number\')" onchange="try{ setCustomValidity(\'\') } catch(e){}" required data-selectable="true">
        <div class="flex">
            <label>Upload CV & Cover Letter</label>
            <input placeholder="CV" type="file" name="Resume" value="" required>
        </div>
        <input type="hidden" name="action" value="validate_form_modal"/>
        <?php wp_nonce_field(\'validate_form_modal_nonce\', \'name_of_nonce_field\'); ?>
        <button id="submit-btn">Submit</button>
    </form>

JS

(function($){
    $("#modal-form-ajax").submit(function(e){
        e.preventDefault();
        var resumetest = $(\'input[name="form_title"]\').val();
        var lastName = $(\'input[name="lastName"]\').val();
        var firstName = $(\'input[name="firstName"]\').val();
        var Email = $(\'input[name="Email"]\').val();
        var contactNumber = $(\'input[name="contactNumber"]\').val();
        var ajaxUrl = { ajaxFormUrl: \'//websiteurl/wp-admin/admin-ajax.php\' }
          $.ajax({
            type: \'post\',
            dataType: "json",
            url: ajaxUrl.ajaxFormUrl,
            data: {
                action: \'validate_form_modal\',
                lastName: lastName,
                firstName: firstName,
                Email: Email,
                contactNumber: contactNumber,
                Resume: Resume
            },
            success: function(data){
                console.log("Thank you for your application");
                console.log($(\'#modal-form-ajax\').serialize());
                $("#modal-form-ajax").fadeOut(\'ease\',function(){
                  $("#modal-form-ajax").html(\'<div id="modal-form-success"><div class="circle-loader"><div class="checkmark draw"></div></div><p>Thank you for your application</p><p>We\\\'ll get back to you shortly.</p></div>\');
                  $("#modal-form-ajax").fadeIn(\'ease\');
                });
              },
            error: function(){
                alert(response);
            }
          });
    });
})(jQuery);

PHP (functions.php)

function ajax_modal_form_init(){
    wp_localize_script(\'ajax-modal-form\', \'modalFormAjax\', array(\'ajaxurl\' => admin_url( \'admin-ajax.php\' )));
    wp_enqueue_script(\'ajax-modal-form\');
}

add_action(\'wp_ajax_validate_form_modal\', \'validate_form_modal\');
add_action(\'wp_ajax_nopriv_validate_form_modal\', \'validate_form_modal\');
function validate_form_modal(){
    ob_clean();
    global $wpdb;

    if(!isset($_POST[\'name_of_nonce_field\']) || ! wp_verify_nonce( $_POST[\'name_of_nonce_field\'], \'validate_form_modal_nonce\')){
        exit(\'The form is not valid\');
    }

    $lastName               = isset($_POST[\'lastName\']) ? filter_var($_POST[\'lastName\'], FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH) : \'\';
    $firstName              = isset($_POST[\'firstName\']) ? filter_var($_POST[\'firstName\'], FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH) : \'\';
    $email                  = isset($_POST[\'Email\']) ? filter_var($_POST[\'Email\'], FILTER_VALIDATE_EMAIL) : \'\';
    $contactNumber          = isset($_POST[\'contactNumber\']) ? filter_var($_POST[\'contactNumber\'], FILTER_VALIDATE_REGEXP) : \'\';

    echo do_shortcode("[cfdb-save-form-post]");

    wp_die();
}

2 个回复
SO网友:Tony Djukic

刚刚看到。。。在HTML中,完全执行操作。我们没有使用HTML告诉表单/提交按钮要做什么,我们使用的是JS/AJAX。

<form method="POST" action="<?php echo admin_url(\'admin-ajax.php\'); ?>" id="modal-form-ajax" autocomplete="off">

应成为:

<form method="POST" id="modal-form-ajax" autocomplete="off">

此外,不要以表单为目标,而应以提交按钮为目标,以便执行以下操作:

$("#modal-form-ajax").submit(function(e){
     e.preventDefault();
应成为:

$("#submit-btn").on(\'click\',function(e) {
     e.preventDefault();

SO网友:Anton Flärd

尝试以下方法之一:

将submit按钮放在表单外部,并将js函数绑定到该按钮$(\'#submit-btn).on(\'click\', function(e){ e.preventDefault(); ...}).return false; 然后你的剧本就结束了$.ajax({...});.在中阅读更多信息this SO question.

结束

相关推荐

仅在admin-ajax.php上使用wp_enQueue_脚本操作挂接时出现400个错误请求

我最近一直在研究ajax。你在网上找到的教程都非常相似,而且很容易实现。但我总是得到bad request 400 在我的ajax-admin.php 文件经过长时间的深入研究,我现在发现这是因为整合的时间。如果我使用init 用于初始化脚本和wp_localize_script, 一切正常。因此,代码本身必须是正确的。我的页面测试功能。phpfunction ajax_login_init(){ wp_register_script(\'ajax-login-script\',get_st