首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用ajax提交表单时出错,并在wordpress中发送邮件

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

Stack Overflow用户
提问于 2017-09-16 04:38:24
回答 3查看 1.6K关注 0票数 1

我尝试使用header.php提交用ajax编写的自定义表单,并使用提交的数据将邮件发送到特定的电子邮件地址,但是在控制台中获得404错误,表单验证执行taht意味着加载jquery文件,但是当试图调用ajaxurl发送邮件时会产生404错误。我100%确信错误在ajax调用中,或者需要在function.php中创建发送邮件的函数,但无法解决,有人能帮我解决这个问题吗?

表格在header.php中

代码语言:javascript
运行
复制
<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文件是

代码语言:javascript
运行
复制
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文件

代码语言:javascript
运行
复制
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发送邮件的代码

代码语言:javascript
运行
复制
$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));
}
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-09-16 04:51:48

当您使Ajax对JavaScript可用时,您实际上是在创建一个名为the_ajax_theme的对象,它的一个属性称为ajaxurl_anyName,包含您的Ajax。

代码语言:javascript
运行
复制
wp_localize_script( 'themestyle', 'the_ajax_theme', array(
    'ajaxurl_anyName' => admin_url( 'admin-ajax.php' )
) );

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

代码语言:javascript
运行
复制
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这样的缩写名称。

票数 1
EN

Stack Overflow用户

发布于 2017-09-16 04:47:10

它看起来不像是ajaxurl已经设置好了,所以您可以在“未定义”URL上获得404。设定这个值,你就应该被设定。

票数 1
EN

Stack Overflow用户

发布于 2017-09-16 04:58:40

它可能需要来自WordPress的WordPress文件,用于表单action

代码语言:javascript
运行
复制
<form action="<?php echo admin_url( 'admin-ajax.php' ) ?>" method="post">

而且,它看起来并不像在您的ajaxurl中定义JavaScript。尝试添加以下内容:

代码语言:javascript
运行
复制
var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";

在现有代码中将其添加到该行的上方或下面:

代码语言:javascript
运行
复制
var dataString = j("#wp_con_form").serialize();
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/46250092

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档