我尝试使用header.php提交用ajax编写的自定义表单,并使用提交的数据将邮件发送到特定的电子邮件地址,但是在控制台中获得404错误,表单验证执行taht意味着加载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));
}
发布于 2017-09-15 20:51:48
当您使Ajax对JavaScript可用时,您实际上是在创建一个名为the_ajax_theme
的对象,它的一个属性称为ajaxurl_anyName
,包含您的Ajax。
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
这样的缩写名称。
发布于 2017-09-15 20:47:10
它看起来不像是ajaxurl已经设置好了,所以您可以在“未定义”URL上获得404。设定这个值,你就应该被设定。
发布于 2017-09-15 20:58:40
它可能需要来自WordPress的WordPress文件,用于表单action
。
<form action="<?php echo admin_url( 'admin-ajax.php' ) ?>" method="post">
而且,它看起来并不像在您的ajaxurl
中定义JavaScript。尝试添加以下内容:
var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
在现有代码中将其添加到该行的上方或下面:
var dataString = j("#wp_con_form").serialize();
https://stackoverflow.com/questions/46250092
复制相似问题