Javascript/css/php/mysql для сбора адресов электронной почты пользователей в div на веб-сайте

Предположим, вы хотите разместить на своем веб-сайте поле с надписью «Дайте нам свой адрес электронной почты, и мы будем присылать вам новости» или что-то в этом роде. Какой простой/элегантный способ собрать эти адреса электронной почты (при условии стандартного стека LAMP)? В частности, я хотел бы получить рекомендации по

  1. Javascript для обработки пользовательского интерфейса (жаловаться, если адрес электронной почты недействителен, говорить спасибо, когда они нажимают Enter и т. д.).
  2. CSS, чтобы он выглядел прилично.
  3. PHP для фактического сбора адресов электронной почты и их хранения (подойдет либо плоский файл, либо база данных).

Или, если есть причудливый способ Rails или AJAX для этого, я тоже очень открыт для этого.

(Все, что я знаю в настоящее время, это то, как сделать это старым способом CGI, с простой веб-формой html с кнопкой отправки и скриптом на стороне сервера, который берет содержимое формы, извлекает адрес электронной почты и выдает html ( потенциально редирект обратно на исходную страницу).)

Если я наивен, думая, что могу взять что-то с полки для этого и должен начать с чего-то вроде учебника по AJAX, дайте мне знать и об этом. Я видел рекомендуется это руководство по JQuery/AJAX. Является ли это или что-то в этом роде самым быстрым способом создать и запустить простую форму регистрации?


javascript css ajax webforms lamp
person dreeves    schedule 31.03.2009    source источник

Ответы (4)


arrow_upward
5
arrow_downward

Я только что реализовал что-то подобное на одном из своих веб-сайтов, как ни странно. Однако я не сохранил адреса электронной почты, я отправил их себе по электронной почте. Я прокомментирую этот бит, чтобы вы могли написать свои биты для хранения плоских файлов или базы данных.

Вот моя реализация с использованием 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/> и т. д.

person Damovisa    schedule 31.03.2009
comment
+1 хорошая отправная точка для него ... Отвлекитесь, перейдите по моей ссылке JSON, чтобы понять, почему PHP echo () определяет, что это такое. - person alex; 31.03.2009
comment
Определенно - хорошая мысль от Алекса, не следуйте этому слепому вырезанию и вставке - убедитесь, что вы понимаете, что он пытается сделать. Это определенно должно помочь вам в следующий раз. - person Damovisa; 31.03.2009
comment
Спасибо большое! Я собирал его по кусочкам, используя учебник, на который есть ссылка в вопросе, но было здорово увидеть, как все это собрано вместе. Очень полезно. Я пошел дальше и украл его почти дословно (не совсем вслепую!), добавив адреса электронной почты в плоский файл. centmail.net - person dreeves; 31.03.2009

arrow_upward
4
arrow_downward

Вот регулярное выражение, которое будет проверять 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

Это выглядит немного загадочно, но это работает! Как указано в комментариях Damovisa, проще использовать функцию PHP filter_var($email, FILTER_VALIDATE_EMAIL).

Обратите внимание, что если вы проверяете электронное письмо перед его отправкой на PHP (для сверхбыстрой проверки), вам нужно будет использовать регулярное выражение, поскольку в JavaScript нет встроенных функций, которые сделали бы это за вас.

Если вы используете AJAX, он должен возвращать отчет об успешном завершении или ошибке с использованием JSON.

Библиотека jQuery может сильно помочь вам при использовании AJAX, но важно понимать, как она работает.

person alex    schedule 31.03.2009
comment
Я предполагаю, что понижение имеет какое-то отношение к моему регулярному выражению, которое некоторые могут счесть слишком длинным и странным? Я этого не писал. - person alex; 31.03.2009
comment
возможно, потому что filter_var($q, FILTER_VALIDATE_EMAIL) в php проще? Помните, что использование регулярного выражения означает, что теперь у вас есть две проблемы (codinghorror.com/blog/archives/001016). .html) :) - person Damovisa; 31.03.2009
comment
Только 2 проблемы, если у вас еще нет работающего регулярного выражения. Я обновлю свой ответ. Спасибо. - person alex; 31.03.2009
comment
Вау, то, что мне было нужно, Алекс, спасибо! - person Gab Royer; 26.06.2009

arrow_upward
1
arrow_downward

Если единственная функция состоит в том, чтобы пользователи вводили адрес электронной почты, я не вижу причин возиться с AJAX. Обновление страницы не нарушит рабочий процесс ваших пользователей. Придерживайтесь старого простого способа CGI.

person nickf    schedule 31.03.2009
comment
+1 ... пожалуйста, не используйте AJAX ради этого. - person alex; 31.03.2009
comment
Я согласен в некоторой степени - если AJAX соответствует дизайну и поведению вашего сайта, я бы сказал, что используйте его. Не все должно быть связано исключительно с функциональностью — если бы это было так, у нас были бы довольно уродливые сайты. - person Damovisa; 31.03.2009
comment
функциональность не должна быть уродливой... иначе Google был бы чертовски уродлив :) можно даже утверждать, что функциональность допускает красивое, но красивое не обязательно допускает функциональность - person Esteban Küber; 31.03.2009

arrow_upward
1
arrow_downward

Я не думаю, что вы найдете что-то вроде «включите это, и все заработает волшебным образом», но вы можете быстро подготовить его со стандартной реализацией LAMP + jQuery:

  • Пользовательский интерфейс: используя регулярное выражение, вы можете легко проверять электронные письма. Google для этого, и вы найдете множество сценариев.
  • AJAX: методы jQuery AJAX великолепны, поэтому я бы порекомендовал их.
  • С PHP довольно легко получить ваши параметры AJAX и вставить их в БД.
person Seb    schedule 31.03.2009