2

假设您想要在您的网站上显示“给我们您的电子邮件地址，我们将向您发送新闻”或类似内容的框。收集这些电子邮件地址的简单/优雅的方法是什么（假设是标准的 LAMP 堆栈）？特别是，我想建议

  1. 处理 UI 的 Javascript（如果电子邮件地址无效，请抱怨，当他们回车时表示感谢等）。
  2. CSS 让它看起来不错。
  3. PHP 实际收集电子邮件地址并存储它们（平面文件或数据库都可以）。

或者，如果有一种花哨的 Rails 或 AJAX 方式可以做到这一点，我也对此非常开放。

（我目前所知道的就是如何使用老式的 CGI 方法，使用带有提交按钮的纯 html Web 表单和获取表单内容、提取电子邮件地址并吐出 html 的服务器端脚本（可能重定向回原始页面）。）

如果我天真地认为我可以为此从现成的东西中获取一些东西，并且应该从 AJAX 教程之类的东西开始，也请告诉我。我看过推荐的这个 JQuery/AJAX 教程。这是启动和运行简单注册表单的最快方法吗？

4

4 回答 4

5

我刚刚在我的一个网站上实现了这样的东西，这很奇怪。不过，我没有存储电子邮件地址，而是通过电子邮件将它们发送给自己。我将注释掉，以便您可以编写平面文件或数据库存储位。

这是我的实现，使用jQuery。偷走 ：）

在 HTML 中： 

<script type="text/javascript">
    $(document).ready(function(){
    $('#btnSubmit').click(function(){
    $('#btnSubmit').disabled = true;
    var val = $('#emailAddress')[0].value;
    $('#emailResponse').html('<img src="ajax-loader.gif" border="0" />').css('backgroundColor', 'ffffd0');
    $.getJSON('notify.php',{email: val}, function(data){
        if (!data.result) {
            $('#emailResponse').html(data.message).css('backgroundColor','ff9999').effect('highlight', {color: '#ffff99'}, 1000);
        } else {
            $('#emailResponse').html(data.message).css('backgroundColor','99ff99').effect('highlight', {color: '#ffff99'}, 1000);
        }
        });
            $('#btnSubmit').disabled = false;
            return false;
    });
$('#emailAddress').keyup(function(e) {
    if(e.keyCode == 13) {
        $('#btnSubmit').click();
    }
    return false;
});
});

</script>

</head>
<body>
    <div style="margin:0 auto;background:#ffffd0;width:500px;padding:10px;text-align:center; font-family:Verdana,Arial,sans-serif; border:1px solid black;">
    If you would like to be notified when we launch, please leave your email address here.<br /><br />
    <input type="text" id="emailAddress" size="40" style="border:1px solid gray;padding:5px;"/>
    <input type="button" id="btnSubmit" value="Submit" style="padding:5px;" />
    <div style="padding:10px;margin:10px;" id="emailResponse"></div>
</div>
</body>

在 notify.php 文件中：

<?php
$q = html_entity_decode($_GET["email"]);

$response = array();

if (!filter_var($q, FILTER_VALIDATE_EMAIL))
{
    $response['result'] = 0;
    $response['message'] = 'Invalid email given - try again';
}
else
{
    // write to file or database

    $response['result'] = 1;
    $response['message'] = "Thanks, your details have been added, we'll notify you when we launch!";
    }
}

echo json_encode($response);
?>

编辑：我知道它不漂亮 - 内联样式、<br/>标签等。

于 2009-03-31T01:04:41.307 回答
4

这是一个将验证 99% 的电子邮件的正则表达式

/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i

它看起来有点神秘，但它确实有效！正如Damovisafilter_var($email, FILTER_VALIDATE_EMAIL)在评论中所说，使用PHP的功能更容易。

请注意，如果您在将电子邮件发送到 PHP 之前对其进行验证（以进行超快速验证），则需要使用正则表达式，因为 JavaScript 中没有内置函数可以为您执行此操作。

如果您确实使用 AJAX，您应该让它使用JSON返回成功或错误报告。

jQuery库可以在使用 AJAX 时为您提供很多帮助，但了解它的工作原理仍然很重要。

于 2009-03-31T01:05:42.087 回答
1

如果唯一的功能是让用户输入电子邮件地址，我认为没有理由打扰 AJAX。页面刷新不会破坏用户的工作流程。坚持使用普通的旧 CGI 方法。

于 2009-03-31T00:32:28.873 回答
1

我不认为你会找到类似“包括这个，一切都会神奇地工作”之类的东西，但你可以使用标准的 LAMP + jQuery 实现立即准备好它：

  • UI：使用正则表达式，您可以轻松验证电子邮件。谷歌，你会发现大量的脚本。
  • AJAX：jQuery AJAX 方法很棒，所以我推荐它。
  • 使用 PHP 很容易获取您的 AJAX 参数并插入到数据库中。
于 2009-03-31T00:34:12.347 回答