使用 Wordpress 时提交时不刷新页面的联系表单

Question

我已经设置了以下代码来制作一个在提交时不刷新页面的联系表单。

HTML：

<form method="POST" id="contact-form">
  <div class="contact-element flex-row">
    <input class="" type="text" name="name" placeholder="Name" id="name" Required>
    <input class="" type="text" name="email" placeholder="Email Address" id="email" Required>
  </div>
  <input class="" type="text" name="subject" placeholder="Subject" id="subject" Required>
  <textarea type="text" name="message" rows="5" placeholder="Message" id="message" Required></textarea>
  <input class="contact-submit" id="submit" name="submit" type="submit" value="Submit">
    <input type="hidden" name="action" value="form-action">
</form>

JavaScript/AJAX 请求：

$("#contact-form").submit(function(event) {
  event.preventDefault();
  var $form = $( this ),
      url = "<?php echo get_template_directory_uri(); ?>/library/contact-form.php";
  var posting = $.post( url, {
    name: $('#name').val(),
    email: $('#email').val(),
    subject: $('#subject').val(),
    message: $('#message').val(),
  });
  posting.done(function( data ) {
    alert('success');
  });
});

PHP：

// Set $to as the email you want to send the test to.
$to = "my@email.com";

// Email subject and body text.
$name = $_POST["name"];
$email = $_POST["email"];
$subject = $_POST["subject"];
$headers .= "Reply-To: ". strip_tags($_POST['email']) . "\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
$message = $_POST["message"];

// send test message using wp_mail function.
if(isset(($_POST['name']), ($_POST['email']), ($_POST['message']), ($_POST["subject"]))) {
  $sent_message = wp_mail( $to, $subject, $message, $headers );
} else {

};

//display message based on the result.
if ( $sent_message ) {
    // The message was sent.
    echo 'The test message was sent. Check your email inbox.';
} else {
    // The message was not sent.
    echo 'The message was not sent!';
}

当我在本地网站上运行该代码时，它会返回成功警报。 PHP 代码还成功地将联系表单信息发送到我的电子邮件地址。

当我在我的网络服务器上运行它时，我得到一个“服务器响应状态为 500（内部错误）”。

我想我一定在这里忽略了一些愚蠢的事情，但我看不到它并希望其他人能看到它并帮助我？ 提前致谢！

Answer 1

这就是我为表单提交 ajax 的方式。它包含了 WordPress 的安全措施，你可以向 google 详细了解它们，但我会提供小的描述。

HTML

<form method="POST" id="contact-form">
    <div class="contact-element flex-row">
        <input class="" type="text" name="name" placeholder="Name" id="name" Required>
        <input class="" type="text" name="email" placeholder="Email Address" id="email" Required>
    </div>
    <input class="" type="text" name="subject" placeholder="Subject" id="subject" Required>
    <textarea type="text" name="message" rows="5" placeholder="Message" id="message" Required></textarea>
    <input class="contact-submit" id="submit" name="submit" type="submit" value="Submit">
    <input type="hidden" name="action" value="contact_form" id="cf_action" url="<?= admin_url('admin-ajax.php'); ?>">
    <?php wp_nonce_field( 'contact_form', 'contact_form_wpnonce' ); ?>
</form>

Javascript

jQuery(function($){
    $("#contact-form").submit(function(e){
        var url = $('#cf_action').attr('url');
        $.ajax({
            type: "POST",
            url: url,
            data: $("#contact-form").serialize(),
            success: function(data) { 
                alert(data.data);
            }
        });
        e.preventDefault(); // avoid to execute the actual submit of the form.
    });
});

功能

add_action('wp_ajax_contact_form', 'contact_form_function');
add_action('wp_ajax_nopriv_contact_form', 'contact_form_function'); 
function contact_form_function()
{   
    if ( !isset($_POST['xyz_contact_email_meta_box_nonce']) && !wp_verify_nonce($_POST['xyz_contact_email_meta_box_nonce'], 'xyz_save_contact_email_data')) {
        # code...
        return;
    }
    $user_name  = sanitize_text_field( $_POST['name'] );
    $user_email = sanitize_email( $_POST['email'] );
    $user_subject = sanitize_text_field( $_POST['subject'] );
    $user_message = sanitize_textarea_field( $_POST['message'] );
    $to = 'xyz@gmail.com';
    $subject = $user_subject;
    $body = 'Hi you recived a message from '.$user_name.'('.$user_email.'),<p>'.$user_message.'</p>';
    $headers = array('Content-Type: text/html; charset=UTF-8');
    $status = wp_mail( $to, $subject, $body, $headers );
    if($status){
        wp_send_json_success('sent successful');
    }else{
        wp_send_json_error('something went wrong');
    }
}

说明

好的，让我稍微介绍一下 WordPress。 WordPress已经内置了处理来自它的主题functions.php的ajax请求的功能，你必须复制并粘贴你想要表单显示的html代码，页脚中的js代码和functions.php中的函数代码

这里有一些提示：-

1. wp_nonce_field = 用于安全目的，防止黑客将表单用于不同目的。
2. 清理数据以确保您没有从发布的数据中收到任何恶意代码，您也可以使用 esc_attr（它会将任何标签和脚本转换为 html）。
3. 使用 WordPress 默认函数 wp_send_json_success & wp_send_json_error 回传数据是一个好习惯。

（如果您觉得难以理解，请原谅我，因为这是我在 stackoverflow 上的第一个答案） 干杯！！