问题描述
假设您想要在网站上显示「提供您的电子邮件地址,我们会传送您新闻」的方块。什么是简单/优雅的方式来收集这些电子邮件地址(假设标准LAMP堆栈)?特别是,我想要建议
- JavaScript处理用户界面(抱怨如果电子邮件地址无效,
- PHP实际收集电子邮件地址并存储它们(无论是平面文件还是数据库都很好) )。
或者如果有一个漂亮的Rails或AJAX方法来做到这一点,我也很开放。 p>
(我目前知道的是如何做这个老式的CGI方式,一个带有提交按钮的纯HTML表单和一个服务器端脚本,内容,拉出电子邮件地址,并输出html(可能会重定向回原始页面)。)
如果我天真地想我可以抓关于这一点,应该开始像一个AJAX教程,让我知道,以及。我看过推荐。
我刚刚实现了一个简单的注册表单,像这样在我的一个网站奇怪地足够。我没有存储电子邮件地址,但我通过电子邮件发送给自己。
这是我的实现,使用。偷走了:)
在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.gifborder =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')。 b $ b}
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黑色>
如果您在我们推出时希望收到通知,请在这里留下您的电子邮件地址。< br />< br />
< input type =textid =emailAddresssize =40style =border:1px solid gray; padding:5px;/>
< input type =buttonid =btnSubmitvalue =Submitstyle =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'] ='给定的电子邮件无效 - 请重试';
}
else
{
//写入文件或数据库
$ response ['result'] = 1;
$ response ['message'] =谢谢,您的详细信息已添加,我们会在我们启动时通知您!
}
}
echo json_encode($ response);
?>
编辑:我知道这不是漂亮的内联样式,< br />
标签等。
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 to handle the UI (complain if invalid email address, say thanks when they hit enter, etc).
- CSS to make it look decent.
- PHP to actually collect the email addresses and store them (either flat file or database is fine).
Or if there's a fancy Rails or AJAX way to do this, I'm very open to that, too.
(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).)
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.
Here's my implementation, using jQuery. Steal away :)
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>
In the notify.php file:
<?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);
?>
Edit: I know it's not pretty - inline styles, <br/>
tags, etc.
这篇关于Javascript / css / php / mysql在网站的div中收集用户电子邮件地址的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!