Wordpress 通过 Ajax 发送电子邮件而不刷新页面挂在 admin_ajax.php答案

【问题标题】：Wordpress Sending email through Ajax without page refresh hangs on admin_ajax.phpWordpress 通过 Ajax 发送电子邮件而不刷新页面挂在 admin_ajax.php
【发布时间】：2021-11-21 20:58:00
【问题描述】：

我在一个网站上有这个测试页面 - https://piclits.com/test-slideshow/

它显示一堆图像/PICLITS，并一次从文件夹 12 中随机抓取它们到幻灯片中。

我想在不刷新页面的情况下通过电子邮件发送主图像（这将显示 12 张新图像），通过电子邮件按钮打开一个弹出窗口以添加电子邮件地址。

一切都很好 - 我可以抓取图像并将其邮寄，但脚本会在页面上闪烁并在 admin-ajax.php 处挂断，而不是仅仅停留在页面上并发送电子邮件。

我的表格：

<div class="ajax-form-container" style="float: left">
   <form id="ajaxformid" action="" method="POST">
       <p>Email this PIC-LIT to a friend.<br />You may include multiple emails if you separate them with a comma.</p>
       <ul style="list-style-type: none;">
           <li>Email: <textarea name="piclit_email" id="piclit_email" rows="4" cols="50" autofocus=""></textarea><input type="hidden" name="founder_piclit" id="founder_piclit" value=""></li>
           <li><input type="hidden" name="piclit_bcc" class="piclit_bcc" value="0"></li>
           <li>bcc: <input type="checkbox" name="piclit_bcc" class="piclit_bcc" value="1">
           <?php wp_nonce_field( 'fiveb_ajax_nonce', 'fiveb_nonce_field' ); ?></li>
           <li><input type="submit" name="submit" value="Send"></li> 
       </ul>
   </form>
   <div id="ajax_success" style="display: none">Email sent.</div>
   <div id="ajax_error" style="display: none">There was an error. Sorry your email was not sent.</div>
</div>

Javascript

<script>  
    jQuery('#ajaxformid').submit(function(e) {
        e.preventDefault();
        var piclit_email = jQuery( "#piclit_email" ).val();
        if (piclit_email == '') 
            alert("Please fill in all fields to send an email.");
        else {
            var founder_piclit = jQuery( "#founder_piclit" ).val();
            // alert (founder_piclit);
            var piclit_bcc = jQuery('.piclit_bcc').val();
            var formData = {
                piclit_email: piclit_email,
                founder_piclit: founder_piclit,
                piclit_bcc: piclit_bcc,
                action: 'fiveb_ajax_mail',
            };
            jQuery.ajax({
                type        : 'POST', 
                url         : '<?php echo admin_url( 'admin-ajax.php' ); ?>',
                dataType    : 'json',
                data        : formData,
            }).done(function(data) {
                console.log(data);
            }).fail(function(data) {
                console.log(data);
            });
        }
    });
</script>

和php：

function fiveb_function() {
    $subject = 'View A Founder PIC-LIT from piclits.com';
    $piclit_email = strval($_REQUEST['piclit_email']);
    $founder_piclit = strval($_REQUEST['founder_piclit']);
    $piclit_bcc = strval($_REQUEST['piclit_bcc']);
    if ($piclit_bcc) {
        $headers[] = 'Bcc: '.$piclit_email;
    }
    $message = '<html><head><title>Founder PIC-LIT</title></head><body><table border="0" cellspacing="2" cellpadding="20" bgcolor="#ffffff" width="100%"><tbody><tr><td></td><td width="600"><p style="text-align: center">Hello!<br />View A Founder PIC-LIT from <a href="https://piclits.com">piclits.com</a>.</p></td><td></td></tr><tr><td></td><td><img src="'.$founder_piclit.'" alt="Founder PIC-LIT" width="600" style="display:block;width:100%" /></td><td></td></tr></tbody></table></body></html>';
    $headers[] = 'From: PIC-LITS <hello@piclits.com>';
    $headers[] = 'Content-Type: text/html; charset=UTF-8';
    if ($bcc) $sent_mail = wp_mail( "", "$subject", $message, $headers );
    else $sent_mail = wp_mail( "$piclit_email", "$subject", $message, $headers );
    if ($sent_mail) {
        echo ('email sent');
        die();
    } else { 
        echo ('There was an error. Sorry your email was not sent.');
        die();
    } 
}
add_action("wp_ajax_fiveb_function", "fiveb_function");
add_action("wp_ajax_nopriv_fiveb_function", "fiveb_function");

似乎我已经很接近了，但我无法让脚本停止挂断在 admin-ajax.php 上。 任何帮助将不胜感激！也许它与我的弹出窗口有关？我没有想法

【问题讨论】：

标签： ajax wordpress refresh wp-mail

【解决方案1】：

您的代码将如下所示。

注意 - 表单操作应为空白。

<form action="" method="POST" id="ajaxformid">

</form>
wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri().'/assets/js/custom.js', array(), '1.0.0', 'true' );
wp_localize_script( 'custom-js', 'fiveb_ajax_mail', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );

add_action("wp_ajax_fiveb_ajax_mail", "fiveb_ajax_mail"); 
add_action("wp_ajax_nopriv_fiveb_ajax_mail", "fiveb_ajax_mail"); 
function fiveb_ajax_mail()
{
$formdata = $_post['formdata'];
wp_mail($to,$subject,$message,$header);
return 'true';
wp_die();
}
//add below js in custom.js file
    $('#ajaxformid').submit(function (e) {
       e.preventDefault();
       jQuery.ajax({
                type: "post",
                dataType: "json",
                url: fiveb_ajax_mail.ajax_url,
                data : {action: "fiveb_ajax_mail","formdata":"your form data variable place here"},
                success: function(msg){
                  console.log(msg);
                }
            });
    }

在我的本地系统中，它工作正常。

【讨论】：

您好，感谢您的回复。我刚刚尝试了您的代码，它仍然会转到 admin-ajax.php 并坐在那里。奇怪的是我删除了我的 ajax 代码，只是使用了你上面的建议，它仍然发送电子邮件？！？我的functions.php中有这个代码``` add_action("wp_ajax_fiveb_ajax_mail", "fiveb_ajax_mail"); add_action("wp_ajax_nopriv_fiveb_ajax_mail", "fiveb_ajax_mail"); ```它怎么知道发送邮件...
@studebaker 我为你编辑答案，请检查。
我用新代码编辑了我的原始帖子。一切正常。只是想在 div 中显示一条消息 - ajax_success 或 ajax_error - 分别表示成功或错误，但我似乎无法让 div 在适当的时候显示。有什么想法吗？
全部完成 - 感谢您的帮助！