使用Javascript / CSS / PHP / MySQL的收集在一个div用户的电子邮件地址的网站上电子邮件地址、用户、网站、CSS
假设你想在你的网站一个盒子，上面写着给我们您的电子邮件地址，我们会向您发送消息或诸如此类。什么是简单的/优雅的方式来收集这些电子邮件地址（假设一个标准的LAMP堆栈）？特别是，我想对建议的
Suppose you want a box on your website that says "Give us your email address and we'll send you news" or somesuch. What's a simple/elegant way to collect those email addresses (assuming a standard LAMP stack)? In particular, I'd like recommendations on
JavaScript来处理用户界面（抱怨，如果无效的电子邮件地址，表示衷心的感谢，当他们按下回车键，等等）。 CSS来使它看起来体面。 PHP实际收集邮件地址，并将它们存储（无论是平面文件或数据库是罚款）。或者，如果有一个奇特的Rails或AJAX的方式做到这一点，我到很开放了。
Or if there's a fancy Rails or AJAX way to do this, I'm very open to that, too.
（我所知道的现在是如何做到这一点老派的CGI方式，用一个普通的HTML网页表单有一个提交按钮和一个服务器端脚本，采用的形式内容，翻出了电子邮件地址，吐奶出的HTML（潜在重定向回到原来的页）。）
(All I know currently is how to do this the old-school CGI way, with a plain html web form with a submit button and a server-side script that takes the form contents, pulls out the email address, and spits out html (potentially a redirect back to the original page).)
如果我天真的以为，我可以抓住的东西下架了这一点，应该开始像一个AJAX教程，让我知道这一点。我已经看到了这个jQuery / AJAX教程建议。那是或类似的东西来获得一个简单的注册最快的方式形成和运行？
If I'm naive in thinking I can grab something off the shelf for this and should be starting with something like an AJAX tutorial, let me know that as well. I've seen this JQuery/AJAX tutorial recommended. Is that or something like it the quickest way to get a simple sign-up form up and running?
推荐答案
我刚刚实现这样的事情在我的网站很奇怪的一个。我没有存储的电子邮件地址，虽然，我给他们发电子邮件给自己。我要评论该位，所以你可以写你的平面文件或数据库存储位。
I just implemented something like this on one of my websites strangely enough. I didn't store the email addresses though, I emailed them to myself. I'll comment that bit out so you can write your flat-file or database storage bits.
下面是我的实现，使用 jQuery的。偷走：）
Here's my implementation, using jQuery. Steal away :)
在HTML：
In the 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);
?>
编辑：我知道这不是pretty的 - 内联样式，＆LT; BR /＆GT; 标签，等等。
I know it's not pretty - inline styles, <br/> tags, etc.
