WordPress登录页面上的Ajax表单

Question

我的代码有问题。 我创建了一个表格，允许用户向我们的客户服务请求“新帐户”。 表格询问信息，然后单击提交，发送带有ajax的电子邮件。 就这么简单，但是它不起作用。 我的用ajax请求调用的php文件没有被调用（代码未执行），就像ajax函数没有采用“ URL”参数一样。 但是ajax请求返回成功。

所以问题是我的电子邮件没有发送。

如果您能帮助我，请先谢谢。

 function submit_new_account_form() { //AJAX envoi contact $("#form_new_account").submit(function(){ var name = $("#name").val(); var email = $("#email").val(); var ap21code = $("#ap21code").val(); var store = $("#store").val(); var Suburb = $("#Suburb").val(); var postcode = $("#postcode").val(); var contact_number = $("#contact_number").val(); var request; if( name !== "" && email !== "" && ap21code !== "" && store !== "" && Suburb !== "" && postcode !== "" && contact_number !== ""){ request = $.ajax({ url: "http://www.globebrandb2b.com/?page_id=39", method : "POST", data: { name : name, email : email, ap21code: ap21code, store: store, Suburb: Suburb, postcode: postcode, contact_number: contact_number } }); request.success(function() { $("#name").val(''); $("#email").val(''); $("#ap21code").val(''); $("#store").val(''); $("#Suburb").val(''); $("#postcode").val(''); $("#contact_number").val(''); $("#after_send").html("<p><div style=' opacity:1 !important; background-color: #ed1c24; color:white; max-height:70px; border: none;' id='success' class='alert alert-success' style='margin-bottom: 0px;'><p><i class='glyphicon glyphicon-alert' style='margin-right: 5px;'></i>Your request has been send.</p></div></p>"); $("#after_send").show(); $("#submit_new_account").attr('disabled','disabled'); setTimeout(function() { $("#form_new_account").hide(); $("#submit_new_account").removeAttr('disabled'); $("#after_send").hide(); }, 5000); }); request.fail(function() { $("#after_send").html('<p><div id="error" class="alert alert-info col-xs-12 col-sm-12 col-md-12 col-lg-12"><p><i class="glyphicon glyphicon-info-sign"></i>An error occured, please try later.</p></div></p>'); }); } return false; }); } 

 mail( 'Dylan.S@globebrand.com', 'TEST GLOBE EUROPE', 'TEST GLOBE MESSAGE'); 

 <form id="form_new_account" name="form_new_account" method="POST"> <table> <tr> <th class="padding"><label for="name" class="col-2 col-form-label">Name:</label></th> <td><input type="text" class="form-control" id="name" name="name" required></td> </tr> <tr> <th class="padding"><label for="email" class="col-2 col-form-label">Email Address:</label></th> <td><input type="text" class="form-control" id="email" name="email" required></td> </tr> <tr> <th class="padding"><label for="ap21code" class="col-2 col-form-label">AP21 Customer Account Code:<br><i>(on your statement)</i></label></th> <td><input type="text" class="form-control" id="ap21code" name="ap21code" required></td> </tr> <tr> <th class="padding"><label for="store" class="col-2 col-form-label">Store Name:</label></th> <td><input type="text" class="form-control" id="store" name="store" required></td> </tr> <tr> <th class="padding"><label for="Suburb" class="col-2 col-form-label">Suburb:</label></th> <td><input type="text" class="form-control" id="Suburb" name="Suburb" required></td> </tr> <tr> <th class="padding"><label for="postcode" class="col-2 col-form-label">PostCode:</label></th> <td><input type="text" class="form-control" id="postcode" name="postcode" required></td> </tr> <tr> <th class="padding"><label for="contact_number" class="col-2 col-form-label">Contact Number:</label></th> <td><input type="text" class="form-control" id="contact_number" name="contact_number" required></td> </tr> </table> <input id="submit_new_account" type="submit" name="submit_new_account" class="button" value="Submit" onclick="submit_new_account_form();"/> <p id="after_send"></p> </form> 

Answer 1

回到开始WordPress开发时，我读到最好使用WordPress的内部AJAX引擎进行请求。 从那以后，这就是我一直在做的事情。 这需要一些额外的工作，但在这种情况下似乎很重要。

我相信URL是您的问题。 如果我错了，有人可以纠正我，但是如果出现以下情况，URL http://www.globebrandb2b.com/?page_id=39不会发回到同一页（使用表单数据运行mail() ）这就是您要完成的工作。

要利用WordPress的内部AJAX，请在下面查看...

在您的functions.php中 ，将脚本排入队列：

wp_enqueue_script('site', get_stylesheet_directory_uri() . '/js/site.js');

// In my projects I pass a small array of variables I want to use in my JS
// One of them is the url for the admin-ajax.php    
$params = array(
    'ajaxURL' => admin_url('admin-ajax.php')
);

// Localize scripts
wp_localize_script('site', 'jsData', $params);

重要！ 必须使用wp_register_script（）或wp_enqueue_script（）注册脚本后才能调用wp_localize_script（）。

要做的是将变量输出到您的页面，例如：

<script type='text/javascript'>
var jsData={"ajaxURL":"http:\/\/www.example.com\/wp-admin\/admin-ajax.php"};
</script>

然后，您需要更新AJAX请求以使用您提供的URL，最重要的是，您要告诉它要运行的函数，在这种情况下，您将在函数中创建new_account_mail（）函数。的PHP。

request = $.ajax({
     url: jsData.ajaxURL, // <----- admin-ajax.php
     method : "POST",
     data: { action: 'new_account_mail', // <---- name of the function in your functions.php
             form: { name : name, // <---- form data
                     email : email, 
                     ap21code: ap21code, 
                     store: store, 
                     Suburb: Suburb, 
                     postcode: postcode, 
                     contact_number: contact_number 
                     }
      }
   });

好了，所以现在在您的functions.php中 ，您将创建一个函数来处理该AJAX提交：

// Add action for `wp_ajax_nopriv_your function name` 
// and `wp_ajax_your function name` so that it works for authenticated 
// and unauthenticated users.
add_action( 'wp_ajax_nopriv_new_account_email', 'new_account_email' );
add_action( 'wp_ajax_new_account_email', 'new_account_email' );
function new_account_email(){

    // Now this function receives your $_POST data

   // Get the form data
   $form = [];
   parse_str($_POST['form'], $form); // parses query string into variables
    $name = $form['name'];
    $email = $form['email'];
    $ap21code = $form['ap21code'];
    // and so on....

    $data = [];

    // Send the mail
    // I like to use a 3rd party library like SwiftMailer
    // then do an if/else to determine if there were issues sending
    if(mail($email, 'TEST GLOBE EUROPE', 'TEST GLOBE MESSAGE')){
          $data['sent'] = 'The message was sent!';
    }else{
          $data['fail'] = 'The message was NOT sent!';
    }

    // In my project, I return a json object
    $response = json_encode($data);

    // Response output
    header( "Content-Type: application/json" );
    echo $response;

    // Stop execution
    wp_die();
}

最后！ 返回您的AJAX：

// The request could come back without failing, but that doesn't 
// indicate the message was successfully sent
request.success(function(response){
    if(response.sent){
            // Message was sent
            // Maybe... :)
            // Even if the email was accepted for delivery, 
            // it doesn't mean it's actually sent and received
    }else{
            // Message was not sent
            // response.fail will have the fail message in it
    }
})
request.fail(function(error){
    // The request itself failed
});

你有它！ 这是额外的工作，但我已经使用了很多次此方法。