将变量从 PHP 传递到 javascript 并传递到 html 表单

Question

我在 WordPress 中使用 jQuery、jQuery 表单和 PHP Mail 发送表单生成的电子邮件时设置了一个联系表单，这是一个公认的非常小的问题。

为了替换我当前的联系表单，它从联系表单页面中执行 pHp 验证，然后使用 PHP 邮件发送，我设计了以下简单的 html 5 表单（可以在此页面上看到：http://edge.donaldjenkins.net/contact） ：

<form id="contact" method="post" action="">
<fieldset>  

    <label for="name">Name</label>
    <input type="text" name="name" placeholder="Your Name" title="Enter your name" class="required">

    <label for="email">E-mail</label>
    <input type="email" name="email" placeholder="yourname@domain.com" title="Enter your e-mail address" class="required email">

    <label for="phone">Phone</label>
    <input type="tel" name="phone" placeholder="ex. (555) 555-5555">

    <label for="website">Website</label>
    <input type="url" name="url" placeholder="http://">

    <label for="message">Question/Message</label>
    <textarea name="message"></textarea>

    <label for="checking" class="hidden">If you want to submit this form, do not enter anything in this field</label><input type="text" name="checking" class="hidden">

    <input type="submit" name="submit" class="button" id="submit" value="Send Message" />

</fieldset>

然后我使用 jQuery validate [jquery.validate.js] 和 form [jquery.form.js] 插件来执行客户端验证：

<script src="js/jquery.validate.js"></script>
<script src="js/jquery.form.js"></script>

<script>
$(function(){
$('#contact').validate({
submitHandler: function(form) {
    $(form).ajaxSubmit({
    url: 'send-message.php',
    success: function() {
    $('#contact').hide();
    $('#instructions').hide();
    $('#status').show();
    $('#popular-posts').show();
    $('#status').append("<p>Thanks! Your request has been sent.  One will try to get back to you as soon as possible.</p>")
    }
    });
    }
});         
});
</script>

验证后，上述脚本使用jQuery.form 的ajaxSubmit function 将日期提交到服务器PHP 页面send-message.php（原因是javascript 无法发送电子邮件）。我使用这个 PHP 文件对数据进行第二次服务器端验证（尽管这可能是多余的，因为设置依赖于 javascript 将数据传递到服务器，因此可以放心地假设没有人会能够在没有启用 javascript 的情况下使用表单）。它还对表单中添加的隐藏输入字段中的数据执行蜜罐验证码检查。然后发送电子邮件：

<?php 
//invoke wp_load in order to use WordPress wp_mail plugin function instead of mail for    better authentification of the sent email
require_once("/path/to/wp-load.php");

//Check to see if the honeypot captcha field was filled in
if(trim($_POST['checking']) !== '') {
$captchaError = true;
$errors .= "\n Error: Captcha field filled in";
} else {

//Check to make sure that the name field is not empty
if(trim($_POST['name']) === '') {
    $errors .= "\n Error: Name field empty";
    $hasError = true;
} else {
    $name = strip_tags($_POST['name']);
}

//Check to make sure sure that a valid email address is submitted
if(trim($_POST['email']) === '')  {
    $emailError = 'You forgot to enter your email address.';
    $hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
    $errors .= "\n Error: Message field empty";
    $hasError = true;
} else {
    $email = strip_tags($_POST['email']);
}

//Check to make sure comments were entered  
if(trim($_POST['message']) === '') {
    $errors .= "\n Error: Message field empty";
    $hasError = true;
} else {
    $phone = strip_tags($_POST['phone']);
    $url = strip_tags($_POST['url']);
    if(function_exists('stripslashes')) {
        $message = stripslashes(trim($_POST['message']));
    } else {
        $message = strip_tags($_POST['message']);
    }
}
//If there is no error, send the email
if(!isset($hasError)) {

    // Send Message 
    $emailTo = 'me@mydomain.com';
    $subject = 'Contact Form Submission from '.$name;
    $body = "Name: $name \n\nEmail: $email \n\nPhone: $phone \n\nWebsite: $url \n\nMessage: $message";
    $headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

    wp_mail($emailTo, $subject, $body, $headers);

    $alert = 'Thanks! Your request has been sent.  One will try to get back to you as soon as possible.';
} else {
    $alert = $errors;
}
} ?>

服务器在变量 $alert 中跟踪是否发现错误或电子邮件是否成功发送。

pHp 函数完成后，脚本会从联系页面中隐藏表单，并显示之前隐藏的 html 元素，并在该元素上附加一条警告消息。

我无法解决的问题是让 javascript 更改该警报消息的措辞以反映电子邮件是否已成功发送，因为我不知道如何传递必要的 pHp 变量 ($alert) 包含将服务器 PHP 进程中的错误消息列表添加到脚本中，以便在联系表单页面中插入。当然，这也是一个非常理论上的问题，因为由于上述原因，一个容易出错的消息甚至不太可能首先到达 PHP 阶段。

我尝试在 PHP 文件末尾插入以下代码，但无济于事：

<script type="text/javascript">
alert = <?php echo $alert; ?>;
</script>

后一种尝试不会在 Firebug 中产生任何错误，但变量值不会被传递。欢迎任何想法或想法。

更新：我添加了此工作流程图以阐明此问题的设置：

Answer 1

在 send-message.php 中，将警报文本放入 IDd <div />:

<div id="statusmsg" style="display: none">
<?php echo $alert ?>
</div>

那么调用页面上的 Javascript 应该如下所示：

<script type="text/javascript">
$(function() {
    $('#contact').validate({
        submitHandler: function(form) {
            $(form).ajaxSubmit({
                url: 'send-message.php',
                success: function(data) {

                    $('#contact').hide();
                    $('#instructions').hide();
                    $('#status').show();
                    $('#popular-posts').show();

                    // Make DOM object from result
                    var $DOMObj = $(data);

                    // Retrieve status message, if any
                    var $status = $('#statusmsg', $DOMObj);

                    // Show status message, if any
                    if ($status) {
                          $status
                                 .css('display', '')
                                 .appendTo('#status');
                    }
            }
            });
        }
    });         
});
</script>

希望您能看到我如何使用 success 回调的参数来检索 AJAX 请求响应的 HTML 内容，找到 statusmsg div 并将其附加到调用页面上的相关元素。

更理想的是，send-message.php 将打印 JSON 而不是 HTML，使这个过程更容易一些。我将把它作为练习留给读者.. 至少在这个问题线程中。

Answer 2

您希望返回成功或失败的电子邮件以响应 AJAX 调用。

对于此示例，您可以简单地返回 false 或 true。如果您需要更多信息，请返回 JSON 字符串，例如...

{
   "success": true,
   "something": ["something", "something-else"]
}

您可以在 PHP 中使用 json_encode() 轻松将数组转换为 JSON。