使用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 = "[email protected]";

// 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代码也成功将联系表单信息发送到我的电子邮件地址。

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

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

Answer 1

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

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 = '[email protected]';
    $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上的第一个答案）干杯！