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

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

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

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

表格在header.php中

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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
代码运行次数:0
运行
AI代码解释
复制
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
代码运行次数:0
运行
AI代码解释
复制
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
代码运行次数:0
运行
AI代码解释
复制
$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-15 20:51:48

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

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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-15 20:47:10

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

票数 1
EN

Stack Overflow用户

发布于 2017-09-15 20:58:40

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

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

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

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

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

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

https://stackoverflow.com/questions/46250092

复制
相关文章
ajax提交form表单
$.ajax({ cache: true, type: "POST", url:ajaxCallUrl, data:$('#yourformid').serialize(),// 你的formid,serialize()函数会把表单要提交的数据序列化成参数形式 async: false,
用户1503405
2021/09/23
3.4K0
使用ajax方法实现form表单的提交
作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载。 写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说想要将控制权放在前端,通过js来操作页面的跳转或者数据变化。 一般这种异步的操作,我们都会想到ajax方式,因此在实现了功能后就整理了这篇文章,通过ajax方法实现for
程序员十三
2018/03/15
3.1K0
利用php发信组件实现表单提交邮件发送功能
V站笔记 平时的钓鱼盗号也是根据这种原理 <?php//error_reporting(E_ALL);error_reporting(E_STRICT);date_default_timezone_s
V站CEO-西顾
2018/06/10
8600
通过Ajax提交表单的数据
当监听到表单的提交事件后,可以调用事件对象的 event.preventDefault()函数,来阻止表单的提交和页面的跳转,示例代码如下:
岳泽以
2022/10/26
2.3K0
pbootcms使用Ajax无刷新提交留言及表单
PbootCMS 本身对于使用ajax请求进行提交时会返回Json数据,那么我们可以无需使用API的情况下实现ajax 提交留言,并自定义页面提示,提升用户体验。 关于pb的ajax很多文章代码都有个小缺陷,什么都不填点击提交后端显示空白数据,下面我根据官方提供的代码改良了一下 1.表单验证 <form onsubmit="return submsg(this);">     联系人<input type="text" name="contacts" required id="contacts">     
小唐同学.
2022/02/23
3.5K0
pbootcms使用Ajax无刷新提交留言及表单
表单提交方式为post,表单中提交的字段名称需要与后台自定义表单中添加的字段一致,否则会导致提交失败。
小唐同学.
2022/02/23
3.6K0
Ajax使用formData提交带图片上传的表单
记录一下今天踩过的坑。。这么个问题居然搞了快两个小时了。ssm框架,前台form带图片上传,因为效验表单数据,所以不能直接submit。
sunonzj
2022/06/21
2.3K0
Pbcms 使用 Ajax 无刷新提交留言及表单
PbootCMS 本身对于使用 ajax 请求进行提交时会返回 Json 数据,那么我们可以无需使用 API 的情况下实现 ajax 提交留言,并自定义页面提示,提升用户体验。
Savalone
2020/02/11
2.9K0
WordPress 文章发布时发送邮件通知所有用户
这个版本跟之前那个不一样,在原基础上添加了可选是否给所有用户发邮件,为了防止泛滥,只能是发布新文章时勾选有效,先看看图吧!
白黎
2023/03/09
6537
WordPress 文章发布时发送邮件通知所有用户
用JQUERY做大表单(多表单域)AJAX提交
function postData() { var post = ""; $(":text").each(function() { post += "&" + this.name + "=" + this.value; }); $(":password").each(function() { post += "&" + this.name + "=" + this.value; }
liulun
2022/05/09
1.3K0
WordPress SMTP发送邮件设置
前几天设置了ssl证书,用的是Let’s Encrypt免费ssl证书设置好了才发现不能发送邮件,这点事我不能接受的,以前用的国外的VPS一直没有问题,搬至腾讯云就不能用mail()函数发邮件,刚开始一直以为是我的Exim4(debian默认的就是这个)配置有问题,然后就开始重装centos,装好以后还是不行,一直以为配置有问题,看日志发现不通,然后突然想到阿里云屏蔽25端口,是不是腾讯云也屏蔽了25端口。结果不出意料真的屏蔽了。害我重装了好几次申请Let’s Encrypt免费证书的次数也用光了。
爱游博客
2019/08/07
3.1K0
WordPress SMTP发送邮件设置
form表单提交与ajax消息传递
后台: def index(request): if request.method == 'POST': print(request.POST) # 普通的键值对:<QueryDict: {'name': ['xxx']}> print(request.body) #print(request.FILES) #传文件< MultiValueDict: {'myfile': [ < InMemoryUploadedFile: day17课件.md(application / octet - stream) >]} > return HttpResponse('OK') return render(request, 'index.html')
小小咸鱼YwY
2019/09/11
3.8K0
解决kindeditor中ajax提交表单无法获取数据的问题
在上面使用了afterBlur 方法做了一个处理,该方法是当编辑框失焦的是触发的,然后再去做数据同步.
飞奔去旅行
2019/06/13
3.5K0
阻止HTML表单提交跳转页面,使用 Jquery Ajax 请求接口
站长源码网 1. HTML 表单 ---- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <form action="" method="post" onsubmit="return save(this)"> 手机号 <input type="text" name="mobile" autocomplete="off"> 登录密码 <input type="text" name="p
很酷的站长
2023/01/16
3.1K0
ajax和form提交上传文件表单
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
suveng
2019/09/17
2.1K0
ajax和form提交上传文件表单
SpringBoot发送邮件+使用html模板发送邮件
这两天在公司做商城系统有一个业务用到了发送邮件功能 springboot 有spring-boot-starter-mail
@依然范特西
2022/12/12
3K0
form表单提交后如何弹出对话框_ajax提交form表单数据
没想到有这么多人浏览这个文章,看来网络的文章害人不浅啊,我重新把代码格式化了,大家好好看吧。
全栈程序员站长
2022/11/09
3.7K0
WordPress 技巧:修改 WordPress 默认发送邮件的邮箱
WordPress 默认发送邮件会使用一个 WordPress@博客域名 的邮箱发送邮件,可以通过以下代码实现让博客管理员邮箱发送邮件。贴到当前主题的 functions.php 文件即可。
Denis
2023/04/15
6060
最简单的方式发送邮件,让程序出错自动发邮件
用过 Django 的朋友肯定知道 Django 的优雅和易用,它的 mail 模块也不例外,我用了之后再也离不开,从此发送邮件只用 djangomail。今天分享一下如何使用 djangomail 发送邮件,如何让程序在抛出异常时自动将堆栈信息发送至邮箱。
somenzz
2021/07/01
7050
最简单的方式发送邮件,让程序出错自动发邮件
WordPress 配置WP SMTP 插件发送邮件
WordPress 如果由发送邮件的需求时可以使用 WP SMTP 插件,发送邮件的场景有,注册验证、找回密码、客户下单、留言等等。WP SMTP 插件的配置也比较简单,下面以QQ邮箱为例来演示一下WP SMTP 插件的配置。
Power
2023/02/28
1.2K0

相似问题

使用AJAX提交表单并在Wordpress网站中处理响应

31

使用ajax提交表单时出错

12

使用Jquery提交AJAX表单时出错

22

使用ajax提交表单时,如何发送电子邮件?

20

Wordpress使用AJAX提交表单

25
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文