WP + AJAX成功消息

Question

I have a multilingual website where I should show a success message after successful submission. I use ACF filed and wp_send_json_success () to report a successful send, but I get an error in the console. The letter was sent successfully. How can I do it correctly so that I can send a success message?

PHP:

add_action('wp_ajax_nopriv_send_email', 'send_email');
add_action('wp_ajax_send_email', 'send_email');
function send_email() {

    $checkbox = $_POST['myCheckboxes'];
    if (isset($checkbox)) {
        echo $checkbox;
    }

    $checkbox_hy = $_POST['myCheckboxesHy'];
    if (isset($checkbox_hy)) {
        echo $checkbox_hy;
    }

    $checkbox_modal_2 = $_POST['modalCheckboks2'];
    if (isset($checkbox_modal_2)) {
        echo $checkbox_modal_2;
    }   

    $checkbox_subs = $_POST['subsCheckbox'];
    if (isset($checkbox_subs)) {
        echo $checkbox_subs;
    }

    $checkbox_sp = $_POST['supportCheckbox'];
    if (isset($checkbox_sp)) {
        echo $checkbox_sp;
    }

    $headers = 'Content-Type: text/html; charset="utf-8"';
    $url = $_POST['url'];
    $name = $_POST['name'];
    $fullname = $_POST['fullname'];
    $spFullname = $_POST['spFullname'];
    $hy_name = $_POST['hy_name'];
    $from = '[e-mail]';
    $to = '[e-mail]';
    $email = $_POST['email'];
    $hy_email = $_POST['hy_email'];
    $spEmail = $_POST['spEmail'];
    $modalEmail = $_POST['modalEmail'];
    $subsEmail = $_POST['subsEmail'];
    $msg = $_POST['msg'];
    $hy_msg = $_POST['hy_msg'];
    $modalMsg = $_POST['modalMsg'];
    $spMsg = $_POST['spMsg'];
    $company = $_POST['company'];
    $spCompany = $_POST['spCompany'];

    if ($hy_name) {
        $subject = '‘Any questions?’ form: ' . $_POST['hy_email'];        
    } elseif ($name) {
        $subject = 'Footer form: ' . $_POST['email'];
    } elseif ($fullname) {        
        $subject = 'Header form: ' . $_POST['modalEmail'];
    } elseif ($subsEmail) {        
        $subject = 'New blog subscription: ' . $_POST['subsEmail'];
    } elseif ($spEmail) {        
        $subject = 'Support form: ' . $_POST['spEmail'];
    }

    $message .= (!empty($name)) ?  '<p><strong>User Name</strong> : ' . $name .'  </p>' : '';
    $message .= (!empty($email)) ?  '<p><strong>User Email</strong> : '. $email .'</p>' : '';
    $message .= (!empty($msg)) ?  '<p><strong>User Message</strong> : '.$msg .'</p>' : '';
    $message .= (!empty($checkbox)) ?  '<p><strong>Checkboxs</strong> : '.$checkbox .'</p>' : '';

    $message .= (!empty($hy_name)) ?  '<p><strong>User Name</strong> : '.$hy_name .'</p>' : '';
    $message .= (!empty($hy_email)) ?  '<p><strong>User Email</strong> : '.$hy_email .'</p>' : '';
    $message .= (!empty($hy_msg)) ?  '<p><strong>User Message</strong> : '.$hy_msg .'</p>' : '';
    $message .= (!empty($checkbox_hy)) ?  '<p><strong>Checkbox</strong> : '.$checkbox_hy .'</p>' : '';


    $message .= (!empty($fullname)) ?  '<p><strong>Full Name</strong> : ' . $fullname .'  </p>' : '';
    $message .= (!empty($modalEmail)) ?  '<p><strong>User Email</strong> : ' . $modalEmail .'  </p>' : '';
    $message .= (!empty($company)) ?  '<p><strong>Company</strong> : ' . $company .'  </p>' : '';
    $message .= (!empty($modalMsg)) ?  '<p><strong>User Message</strong> : ' . $modalMsg .'  </p>' : '';
    $message .= (!empty($checkbox_modal_2)) ?  '<p><strong>Checkbox</strong> : '.$checkbox_modal_2 .'</p>' : '';

    $message .= (!empty($subsEmail)) ?  '<p><strong>User Email</strong> : '. $subsEmail .'</p>' : '';
    $message .= (!empty($checkbox_subs)) ?  '<p><strong>Checkbox</strong> : '.$checkbox_subs .'</p>' : '';

    $message .= (!empty($spFullname)) ?  '<p><strong>User Name</strong> : '.$spFullname .'</p>' : '';
    $message .= (!empty($spEmail)) ?  '<p><strong>User Email</strong> : '.$spEmail .'</p>' : '';
    $message .= (!empty($spCompany)) ?  '<p><strong>Company</strong> : ' . $spCompany .'  </p>' : '';
    $message .= (!empty($spMsg)) ?  '<p><strong>User Message</strong> : '.$spMsg .'</p>' : '';
    $message .= (!empty($checkbox_sp)) ?  '<p><strong>Checkbox</strong> : '.$checkbox_sp .'</p>' : '';


    $message .= (!empty($url)) ?  '<p><strong>Url:</strong> : '.$url .'</p>' : '';
    $message .= '</body></html>';
    $send_mail = mail($to, $subject, $message, $headers);
    echo $send_mail;

    if($send_mail) {
            $data = get_field('success_message', 'option');
            wp_send_json_success($data, 200);
    }

    return  $msg;
    die();
}

AJAX:

jQuery('.submit').on('click', function(e) {
    e.preventDefault();

    // All data from form
    var str = $(this).closest('form').serialize();

    $("#contact-form input:checkbox:not(:checked)").each(function(e){ 
          str += "&"+this.name+'=false';
    });

    // Vars
    var name = jQuery('#name').val();
    var email = jQuery('#email').val();
    var msg = jQuery('#msg').val();
    var subj = jQuery('#subj').val();
    validateEmail(email);
    if (msg == '' || email == '' || validateEmail(jQuery('#email').val()) == false) {
        validateEmail(email);
        validateText(jQuery('#msg'));
        validateText(jQuery('#name'));
        return false;
    }

    jQuery.ajax({
        type: "post",
        url: ajaxactionurl,
        data: "action=send_email&" + str + "&url=" + page_url,
        dataType: 'json',
        success: function (response) {
            jQuery('#contact-form input').val('');
            jQuery('#contact-form textarea').val('');
            jQuery('.submit').text('Thank you!');
           console.log(response.data);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log(textStatus);
        }
    });

});

Answer 1

Your AJAX Call should only return JSON and should not return anything else, so making following changes.

    $send_mail = mail($to, $subject, $message, $headers);
    //echo $send_mail; Comment this, it is not required

    if($send_mail) {
            $data = get_field('success_message', 'option');
            wp_send_json_success( array('data' => $data ) , 200);  //Return as array.
    }

    //return  $msg; Comment this as well.
    die();

In your AJAX Callback of JS, you will get the data where you are using console.log(response.data);