【问题标题】:Sending email in WordPress using jQuery and ajax使用 jQuery 和 ajax 在 WordPress 中发送电子邮件
【发布时间】:2020-02-21 08:50:12
【问题描述】:

我这里有个小问题。我正在 wordpress 上制作一个简单的报价单。 我有两种形式,第一种将数据发送到执行所有计算的 jQuery(选项很少,所以我们没有使用数据库),然后打印一个 html 行。直到这里没有问题;当我尝试将该行/行发送到 PHP 以发送简单的电子邮件时,问题就开始了。我尝试过使用 ajax 和 wp_mail 但没有成功。 这是我尝试过的:

wordpress 模板文件中的 HTML:

<!--first form with data to calculate-->
 <form class="needs-validation">
  <!--select fields, no problem here-->
 </form>
  <div class="table-responsive"> <!--risultato preventivo-->
            <table class="table table-bordered" id="dynamic_field">
                <tr>
                    <!--result given by jQuery-->
                </tr>
            </table>
   <p id="total"><!--total price passed by jQuery--></p>
   </div>

   <!--second form for sending email-->
   <form action="#" method="POST">
            Nome:<br>
            <input type="text" name="nome" id="nome">
            <br>
            Cognome:<br>
            <input type="text" name="cognome" id="cognome">
            <br>
            Email:<br>
            <input type="email" name="email" id="email">
            <input type="hidden" name="invia" value="s">
            <input type="submit" id="inviaForm" value="Invia">
        </form>
        <div id="worked"></div>

在 main.js 文件中带有 calcs 的 jQuery:

(function ($) {
   $(document).ready(function () {

      function generaRisultato (riga,nProfilo,nColore,nSerramento,costoRiga){
        var risultato = '<tr id="row' + riga +
         '" class="dynamic-added"><td><div><h5 class="my-0">Articolo: ' + nProfilo +
         '</h5><br><small class="text-muted">Colorazione: ' + nColore +
         '</small><br><small class="text-muted">Serramento: ' + nSerramento +
         '</small></div><span id="costo-riga'+riga+'">'+costoRiga+'€</span></td>'+
         '<td><button type="button" name="remove" id="'+ riga +'" class="btn btn_remove">-</button> 
         </td></tr>';
        return risultato;    
       }
        //calcs done correctly
        $('#dynamic_field').append(generaRisultato(i,profile,color,name,price)); //result printed

       var risultatoFinale = $('#dynamic_field').html(); //variable with result stored for email


       //sending form mail ajax
    $('#inviaForm').on('submit', function(e){
    //evito l'invio del form
    e.preventDefault(); 

    //recupero i valori
    var nomeUser = $('#nome').val();
    var cognomeUser = $('#cognome').val();
    var emailUser = $('#email').val();
    var totaleFinale = $('#totale').html();
    var preventivoFinale = $('#dynamic_field').html();

    //eseguo la chiamata ajax
    $.ajax({
      type: "POST",
      url: my_vars.ajaxurl, 
      data: {
        action : 'invio_mail', //azione da eseguire
        _nonce : my_vars.nonce,
        nome : nomeUser,
        cognome : cognomeUser,
        email : emailUser,
        totale : totaleFinale,
        preventivo : preventivoFinale
      },
      success: function(res){
        $('#funzionante').html(res);
      }
    });
  });

   });
 })(jQuery);

functions.php 中的 PHP:

function vf_load_theme_preventivatore(){
wp_register_script('main', get_template_directory_uri().'/preventivatore/js/main.js', false, false, 
true);
wp_enqueue_script('main');

wp_localize_script( 'main', 'my_vars', array(
    'ajaxurl' =>admin_url('admin-ajax.php'),
    'nonce' => wp_create_nonce('invio-mail-nonce')
));
}
add_action('wp_enqueue_scripts', 'vf_load_theme_preventivatore');

function invio_mail_ajax(){
//verifico che il nonce sia corretto
if(!wp_verify_nonce( $_REQUEST['_nonce'], 'invio-mail-nonce') ){
    die('Non autorizzato!');
}

//Prepariamo le variabili da usare
$successo = '';
$nome = strval($_REQUEST['nome']);
$cognome = strval($_REQUEST['cognome']);
$email = $_REQUEST['email'];
$preventivo = $_REQUEST['preventivo'];
$totale = $_REQUEST['totale'];

//script mail
$header = "From: Site <test@site-domain.it>\n";
$header .= "BCC: Altro Ricevente <test2@my-domain.it>\n";
// costruiamo le intestazioni specifiche per il formato HTML
$header .= "Content-Type: text/html; charset=\"UTF-8\"\n";
$oggetto = "Ecco il tuo preventivo";
$messaggio = "<html><body><p>Richiesta preventivo da sito</p><p>Nome: ".$nome."</p><p>Cognome: 
 ".$cognome."</p><p>Email: ".$email."</p> <p>Dati del preventivo</p><p>".$preventivo."</p><p>Totale: 
 ".$totale."€</p></body></html>";
$inviata = wp_mail($email,$oggetto,$messaggio,$header);

$successo .= '<p>'.$nome.'</p>';

echo $successo;

die();

if($inviata){
    $successo = '<p> email invata</p>';
    echo $successo;
    die();
 } else die('errore nella mail');
}
add_action('wp_ajax_invio_mail','invio_mail_ajax');
add_action('wp_ajax_nopriv_invio_mail','invio_mail_ajax');

这就是我所做的,我只是隐藏了 jQuery 计算,因为它完美地工作。 我想发送一封带有 html 格式文本的电子邮件,使用此解决方案甚至不会发送电子邮件(在将 ajax 和 php 脚本放入功能之前,电子邮件到达,php 在模板文件中),我也无法通过 html带有结果和报价总额的表格行。也许我错了 ajax 或 php 部分。 有什么帮助吗?感谢你的支持!

【问题讨论】:

  • 邮件设置问题似乎是您的服务器,请检查 SMTP 配置。

标签: php jquery ajax wordpress


【解决方案1】:

创建了 AJAX 提交表单。测试工作良好,您可以更改数据。希望对您有所帮助。

复制并粘贴到您的 function.php 文件中

function invio_mail(){
$to = 'sendto@example.com';
$subject = 'The subject';
$body = 'The email body content';
$headers = array('Content-Type: text/html; charset=UTF-8');

wp_mail( $to, $subject, $body, $headers );
echo 'mail send';
die;
}
add_action("wp_ajax_invio_mail", "invio_mail");
add_action("wp_ajax_nopriv_invio_mail", "invio_mail");

只要粘贴你想要的页面(Form)

<form id="ajaxformid" action="#" method="POST">
        Nome:<br>
        <input type="text" name="nome" id="nome">
        <br>
        Cognome:<br>
        <input type="text" name="cognome" id="cognome">
        <br>
        Email:<br>
        <input type="email" name="email" id="email">
        <input type="hidden" name="invia" value="s">
        <input type="submit" id="inviaForm" value="Invia">
</form>

只粘贴到页脚

<script>
 jQuery(document).ready(function($) {   
    var frm = $('#ajaxformid');
    frm.submit(function (e) {
        var formData = {
            nome: jQuery('#nome').val(),
            cognome: jQuery('#cognome').val(),
            email: jQuery('#email').val(),
            action:'invio_mail'
        };
        $.ajax({
            type        : 'POST', 
            url         : "<?php echo admin_url('admin-ajax.php'); ?>",
            data        : formData,
            dataType    : 'json',
            encode          : true
        }).done(function(data) {
            console.log(data);        
        }).fail(function(data) {
            console.log(data);

        });
        e.preventDefault();     
    });

  });
</script>

【讨论】:

  • 好的,谢谢,我去试试;但是我应该在哪里调用 wp_mail() 来实际发送电子邮件?他们到底在哪里?我应该用 $_REQUEST 删除变量
  • 计算前 var frm = $('#ajaxformid');
  • invio_mail() 函数内部使用'wp_mail()'
  • 对不起@vadivel-a,对我不起作用,没有发送邮件。在函数 invio_mail() 中,在echo json_encode($_POST); 之后我开始构建电子邮件和消息的标题,然后我调用wp_mail($_POST['email'],$subject,$message,$header); 是吗?我已经配置了 SMTP。对不起我的无知。谢谢!
  • Ajax 请求发送与否?
猜你喜欢
  • 2011-08-20
  • 2017-12-25
  • 2017-07-21
  • 1970-01-01
  • 2018-10-09
  • 1970-01-01
  • 2015-09-15
  • 1970-01-01
  • 2014-11-29
相关资源
最近更新 更多