dre*_*ves 2 javascript css ajax lamp webforms
假设您希望在您的网站上有一个框,上面写着“给我们您的电子邮件地址,我们将向您发送新闻”或类似内容。收集这些电子邮件地址的简单/优雅的方法是什么(假设标准 LAMP 堆栈)?特别是,我想要关于
或者,如果有一种奇特的 Rails 或 AJAX 方式可以做到这一点,我也对此持开放态度。
(我目前所知道的是如何以老式 CGI 方式执行此操作,使用带有提交按钮的纯 html Web 表单和获取表单内容、提取电子邮件地址并吐出 html 的服务器端脚本(可能会重定向回原始页面)。)
如果我天真地认为我可以为此拿一些现成的东西并且应该从 AJAX 教程之类的东西开始,也请告诉我。我看过推荐的这个 JQuery/AJAX 教程。这是启动并运行简单注册表单的最快方法吗?
我只是奇怪地在我的一个网站上实现了这样的东西。不过,我没有存储电子邮件地址,而是通过电子邮件将它们发送给自己。我会注释掉这一点,以便您可以编写平面文件或数据库存储位。
这是我的实现,使用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>
Run Code Online (Sandbox Code Playgroud)
在 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);
?>
Run Code Online (Sandbox Code Playgroud)
编辑:我知道它不漂亮 - 内联样式、<br/>标签等。