使用 ajax 提交表单时出错并在 wordpress 中发送邮件答案

【问题标题】：Error in submit form with ajax and send mail in wordpress使用 ajax 提交表单时出错并在 wordpress 中发送邮件
【发布时间】：2017-09-16 04:38:24
【问题描述】：

我正在尝试使用 ajax 提交用 header.php 编写的自定义表单并将邮件发送到带有提交数据的特定电子邮件地址，但在控制台中收到 404 错误，执行表单验证意味着 jquery 文件已加载但尝试调用时ajaxurl 发送邮件它给出 404 错误。我 100% 确定错误是在 ajax 调用中或需要在 function.php 中创建函数以发送邮件但无法解决，谁能帮我解决这个问题？

header.php 中的表单

<form id="wp_con_form" method="post">
  <ul class="form-list wp_contact_form_ul cf">
    <li>
      <input type="text" name="name" id="name" placeholder="Name *" class="text-field wp_con_frm_name">
    </li>
    <li>
      <input type="text" name="phone" id="phone" placeholder="Phone *" class="text-field wp_con_frm_phone">
    </li>
    <li>
      <input type="text" name="email" id="email" placeholder="Email *" class="text-field wp_con_frm_email">
    </li>
    <li>
      <input type="text" name="agency" id="agency" placeholder="agency" class="text-field ">
    </li>
    <li class="full">
      <textarea name="message" id="message" placeholder="Message *" class="text-field wp_con_frm_message"></textarea>
    </li>
    <li class="form-button">
      <input type="submit" value="Send" id="wp_con_frm_btn" class="button" />
    </li>
    <div class="wp_cont_form_msg"></div>
  </ul>
</form>

在function.php中调用jquery文件是

wp_enqueue_style( 'themestyle', get_template_directory_uri() . '/assets/css/style.css',false,'1.1','all' );

wp_localize_script("themestyle","the_ajax_theme", array("ajaxurl_anyName" => admin_url("admin-ajax.php")));

用于验证和 ajax 调用的 Jquery 文件

var j = jQuery.noConflict();

j(document).ready(function(){
function validateContact(){
        var output = true;
        j('.wp_contact_form_ul li').removeClass('wp_cont_frm_err_msg');

        if(!(j(".wp_con_frm_name").val())){
            j(".wp_con_frm_name").parent().addClass('wp_cont_frm_err_msg');
            output = false;
        }

        if(!(j(".wp_con_frm_phone").val())){
            j(".wp_con_frm_phone").parent().addClass('wp_cont_frm_err_msg');
            output = false;
        }

        if(!j(".wp_con_frm_phone").val().match(/^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/))
        {
            j(".wp_con_frm_phone").parent().addClass('wp_cont_frm_err_msg');
            output = false;
        }           

        if(!(j(".wp_con_frm_email").val())){
            j(".wp_con_frm_email").parent().addClass('wp_cont_frm_err_msg');
            output = false;
        }

        if(!j(".wp_con_frm_email").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/))
        {
            j(".wp_con_frm_email").parent().addClass('wp_cont_frm_err_msg');
            output = false;
        }           

        if(!(j(".wp_con_frm_message").val())){
            j(".wp_con_frm_message").parent().addClass('wp_cont_frm_err_msg');
            output = false;
        }
        return output;
    }

    /* send contact form data to email */

    function afterSubmit(getobj)
    {
        if(getobj.status)
        {           
            j('#wp_con_form')[0].reset();
            j('#wp_con_form .wp_cont_form_msg').html(getobj.message).slideDown().delay(5000).slideUp();             
        }
        else
        {                               
            j('#wp_con_form .wp_cont_form_msg').html(getobj.message).slideDown().delay(5000).slideUp(5000);                 
        }   
    }   

    j('#wp_con_frm_btn').click(function(){
        var output = validateContact();
        if(output){
            var dataString = j("#wp_con_form").serialize();
            j.ajax({
                type: "POST",
                url: ajaxurl,
                dataType:"json",
                data: dataString,               
            }).always(function(data)
            {           
                afterSubmit(data);
            });
        }
        return false;
    });

});

function.php中发送邮件的代码

$name = $_POST['name'];
$phone = $_POST['phone'];
$email = $_POST['email'];
$msg = $_POST['message'];
$to      = 'yourname@example.com';

$subject =  'List Qwick';
$message =  'Name: '.$name. "\r\n" .
            'Phone: '.$phone. "\r\n" .
            'Email: '.$email. "\r\n" .
            'Message: '.$msg. "\r\n" .

$headers = "From: ".$email."\r\n" .'X-Mailer: PHP/' . phpversion(); 

if(wp_mail($to, $subject, $message, $headers))
{
    $getMessage = '<p class="success">Your Email Has Been Sent Successfully</p>';           
    echo json_encode(array('status'=>1,'message'=>$getMessage));
}
else 
{   
    $getMessage = '<p class="error">Mail function not working..</p>';           
    echo json_encode(array('status'=>0,'message'=>$getMessage));
}

【问题讨论】：

你能检查一下控制台->网络中发布的数据是在哪个url吗？
您可以为此使用联系表格 7 插件。
这个问题将被关闭，因为您所做的只是转储您的代码并询问为什么它不起作用。我们需要更多证据来证明您已经尝试过什么，以及您认为错误在哪里。请阅读stackoverflow.com/help/how-to-ask了解更多信息

标签： php jquery ajax wordpress

【解决方案1】：

当您使 Ajax URL 可用于 JavaScript 时，您实际上是在创建一个名为 the_ajax_theme 的对象，其属性之一称为 ajaxurl_anyName 并包含您的 Ajax URL。

wp_localize_script( 'themestyle', 'the_ajax_theme', array(
    'ajaxurl_anyName' => admin_url( 'admin-ajax.php' )
) );

在您的 Ajax 调用中，您尝试访问不存在的 ajaxurl。要使用您实际定义的值，您必须使用您在wp_localize_script() 中定义的名称。因此，您的 Ajax 调用应如下所示：

j('#wp_con_frm_btn').click(function(){
    var output = validateContact();
    if(output){
        var dataString = j("#wp_con_form").serialize();
        j.ajax({
            type: "POST",
            url: the_ajax_theme.ajaxurl_anyName,
            dataType:"json",
            data: dataString,               
        }).always(function(data)
        {           
            afterSubmit(data);
        });
    }
    return false;
});

我建议使用像 themeSlug.ajaxURL 这样的缩写名称。

【讨论】：

【解决方案2】：

看起来从来没有设置过 ajaxurl，所以你在“未定义”的 URL 上得到了 404。设置该值，您应该被设置。

【讨论】：

【解决方案3】：

它可能需要来自 WordPress 的 admin-ajax.php 文件，格式为 action。

<form action="<?php echo admin_url( 'admin-ajax.php' ) ?>" method="post">

此外，您似乎没有在 JavaScript 中定义 ajaxurl。尝试添加：

var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";

在现有代码中将其添加到此行的上方或下方：

var dataString = j("#wp_con_form").serialize();

【讨论】：