Свежие комментарии

    Архивы за Ноябрь, 2018

    JQuery: Полезные фрагменты кода для вашего сайта

    JQuery: Полезные фрагменты кода для вашего сайта

    JQuery является популярной JavaScript библиотекой, которая используется многими разработчиками и во многих приложенях. При использовании JQuery нужно писать меньше кода, написание функций является менее сложным, и есть много плагинов, которые можно использовать бесплатно в веб-приложения. Даже если вы пишете весь код самостоятельно, то требуется всего лишь несколько строк кода, чтобы создавать красивые и мощные функции для вашего сайта.

    Заполнение select-меню с jQuery и Ajax

    Одни из наиболее мощных функций в Ajax содержатся в Ajax Suite. В данном примере показано, как заполнять второе select-меню на основе выбора первого меню.

    Например, у нас есть меню с главными категориями:

    <form>
    	<label for="category">Choose: </label>
    	<select id="category" name="category">
    		<option value="fruit">Fruit</option>
    		<option value="grain">Grains</option>
    		<option value="vegetables">Vegetables</option>
    	</select>
    </form>

    Если кто-либо изменяет значение в данном меню выбора, то нам нужно показать эквивалентное меню внутри элемента span с ID «subcat». Для этого мы используем следующий фрагмент JQuery, который выполняет Ajax запрос к PHP-файлу с именем «getSubCat.php». После того, как меню выбора изменяется, выводится изображение загрузки (в случае медленного Интернет-соединения), вызывается PHP сценарий и суб-меню выбора становится видимым.

    $(document).ready(function() {
    	$('#category').change(function() {
    		var category = $(this).val();
    		$.ajax({
    			type: 'GET',
    			url: 'getSubCat.php',
    			data: 'cat=' + category,
    			dataType: 'html',
    			beforeSend: function() {
    				$('#subcat').html('<img src="://:///loader.gif" alt="JQuery: Полезные фрагменты кода для вашего сайта" />');
    			},
    			success: function(response) {
    				$('#subcat').html(response);
    			}
    		});
    	});
    });

    Код PHP используется из файла getSubCat.php:

    array('Apples', 'Pears', 'Cherries', 'Oranges', 'Kiwis'),
    	'grain' => array('Wheat', 'Corn'),
    	'vegetables' => array('Tomatoes', 'Beans', 'Peas', 'Peperoni')
    );
    // лучше использовать базу данных, массив используется только для примера 
    if (!empty($_GET['cat'])) {
    	if (array_key_exists($_GET['cat'], $data)) {
    		echo '
    <select id="subselect" name="'.$_GET['cat'].'">';
    		foreach ($data[$_GET['cat']] as $key => $val) {
    			echo '
    <option value="'.$key.'">'.$val.'</option>
     
    ';
    		}
    		echo '
    	</select>
     
    ';
    	} else {
    		echo 'Array-key doesn't exist';
    	}
    } else {
    	echo 'Invalid request';
    }

    Это простой пример того, как можно использовать возможности Ajax, которые включают в себя много функций и придают большую гибкость.

    Отключение/включение кнопки «Отправить» на форме с помощью JQuery

    На страницах с регистрацией и формах заказа посетитель должен принимать некоторые условия сервиса, перед тем как продолжить заполнение формы. Очень хорошим способом реализации этого является отключение кнопки «Отправить», пока пользователь не установит какой-либо флажок (например: Я принимаю условия сервиса). Следующий фрагмент кода будет включать/отключать кнопку «Отправить» после того, как будет установлен или снят флажок.

    $('#accept').click(function() {
    	if ($('#buybtn').is(':disabled')) {
        	$('#buybtn').removeAttr('disabled');
        } else {
        	$('#buybtn').attr('disabled', 'disabled');
        }
    });

    Вместе с этой функцией мы используем следующий HTML код для кнопки «Отправить».

    <input id="accept" name="accept" type="checkbox" value="y" /> Я принимаю условия!
    <input id="buybtn" disabled="disabled" name="Submit" type="submit" value="Отправить" />

    Простая фото галерея с уменьшенными изображениями

    Если вы ищете легкий способ создания фото галереи, этот фрагмент кода для вас. Функция работает очень просто: если посетитель нажимает миниатюрное изображение, то значение из атрибута «href» передается в атрибут «src» большего изображения. Вот и все, посмотрите пример кода JQuery и, конечно, HTML.

    $("#thumbs a").click( function() {
    	var changeSrc = $(this).attr("href");
    	$("#detail").attr("src", changeSrc);
    	return false;
    });
    <img id="detail" src="://:///img/1.jpg" alt="JQuery: Полезные фрагменты кода для вашего сайта" />
     
    	<a href="img/1.jpg"><img src="://:///thumbs/1.jpg" alt="JQuery: Полезные фрагменты кода для вашего сайта" /></a>
    	<a href="img/2.jpg"><img src="://:///thumbs/2.jpg" alt="JQuery: Полезные фрагменты кода для вашего сайта" /></a>
    	<a href="img/3.jpg"><img src="://:///thumbs/3.jpg" alt="JQuery: Полезные фрагменты кода для вашего сайта" /></a>

    Как скрывать и показывать элементы на основе выбора переключателя

    В JQuery есть много отличных функций, чтобы показывать или скрывать HTML-элементы. Этот пример о том, как показать дополнительный список на основе выбора кнопки-переключателя. Сначала сценарий проверяет, что переключатель установлен и отображает дополнительный контейнер, в противном случае скрывает этот контейнер.

    $('#payments input[type=radio]').click(function() {
    	if ($('input[name=payment]:checked').val() == "creditcard") {
    		$("#cards").show();
    	} else {
    		$("#cards").hide();
    	}
    });

    Фрагмент HTML кода включает в себя группу переключателей и DIV контейнер, который становится видимым, когда установлен переключатель со значением «creditcard».

    <ul id="payments">
    	<li>
    <input id="creditcard" name="payment" type="radio" value="creditcard" /> Creditcard
    <nodiv id="cards">
    			<label for="cctype">Choose one: </label>
    <select id="cctype" name="cctype">
    <option>...</option>
    <option value="master">MasterCard</option>
    <option value="visa">Visa</option>
    <option value="amex">American Express</option>
    </select></nodiv></li>
    	<li>
    <input name="payment" type="radio" value="paypal" /> PayPal</li>
    	<li>
    <input name="payment" type="radio" value="wire" /> Wire/transfer</li>
    </ul>

    Все примеры вы можете посмотреть на этой странице.

    Проверка адреса электронной почты с использованием PHP и AJAX

    Проверка адреса электронной почты с использованием PHP и AJAX

    В данной статье вы научитесь проверять действительность адреса электронной почты без перезагрузки страницы, в то время как пользователь будет заполнять форму.

    Имейте в виду, что нет никакого способа убедиться, что введен рабочий адрес электронной почты. Всё, что можно сделать, это запретить пользователям вводить слишком случайные адреса или несуществующие домены. Я работал над формой для нового веб-сайта, в котором нужно создавать учетные записи пользователей, и искал в Интернете способы, применяемые для проверки электронной почты помимо использования регулярного выражения, и наткнулся на сайт, в котором была описана полезная PHP функция. Я думаю, что использование этой функции вместе в регулярным выражением сделают своё дело.

    Итак, давайте начнем. Сначала создадим форму, которая будет вызывать функции. Поскольку она будет создавать учетные записи пользователей, назовём её adduser.php.

    (Вы можете настроить HTML/CSS по своему усмотрению, также вы можете заметить, что в данном разделе нет PHP кода, поскольку данная форма является частью большего файла)

    <script type="text/javascript" src="://:///includes/js/validate_email.js"></script> 
      
    <form method="post" action="register.php" name="user"> 
    <h2>User Creation</h2> 
    UserName (Display Name): <input type="text" name="display_name" id="display_name"/> <br /> 
    First Name: <input type="text" name="fname" id="name"/><br /> 
    Last Name: <input type="text" name="lname" id="surname"/><br /> 
    E-mail: <input type="text" name="email" id="email" onBlur="checkEmail()"/><nodiv id="emailflag" style="display:inline;"> <img src="://:///images/failure.gif"></nodiv><br /> 
    Password: <input type="password" name="pass" id="pass"/> 
    Confirm PW: <input type="password" name="pass2" id="pass2" /> 
    <br  /> 
    </form>

    Здесь кое-что следует отметить: начнем с команды onBlur в поле ввода электронной почты. Команда будет вызывать функцию проверки почты (которая включена в начале файла) каждый раз при переключении от поля ввода или нажатии кнопки мыши за её пределами. Также обратите внимание, что nodiv после текстового поля ввода содержит изображение, показывающее неудачный ввод, и идентификатор тега будет использоваться для изменения этого изображения. Далее необходимо создать файл, который и будет выполнять проверку, когда AJAX его вызовет. Назовём этот файл validate_email.php. Разберём файл, чтобы узнать, что в нем происходит.

    <?php 
    if (isset($_GET['email'])){ 
        isValidEmail($_GET['email']); 
    }
    ?>

    Данная пара строк проверяет, что переменная создана, и если это так, то вызывает функцию для проверки адреса – это предотвратит прямой доступ к данному файлу или передачу пустой строки. Как вы видите, значение в переменной передается в функцию.

    <?php 
    function isValidEmail($email) 
        { 
        $myReg="/^[A-Za-z0-9._-]+@[A-Za-z0-9_-]+.([A-Za-z0-9_-][A-Za-z0-9_]+)$/"; 
            if(preg_match($myReg, $email)){ 
                if(domain_exists($_GET['email'])) 
                { 
                    echo("<img src='://:///images/success.gif'>"); 
                } 
                else
                { 
                    echo("<img src='://:///images/failure.gif'>"); 
                } 
            } 
            else
            { 
                echo("<img src='://:///images/failure.gif'>"); 
            } 
        }  
    ?>

    Функция выглядит хуже, чем есть на самом деле из-за регулярного выражения. Регулярное выражение может быть немного непонятными, но как только вы поймете, что оно делает, это не так уж и плохо .. Но регулярные выражения выходят за рамки данной статьи. На данный момент имейте в виду, что регулярное выражение проверяет, что переданная строка отформатирована правильно. Сначала создаем регулярное выражение и передаем адрес электронной почты через команду preg_match. Функция проверяет, соответствует ли адрес регулярному выражению и возвращает true или false. Если строка проходит проверку, мы передаем её в нашу функцию для проверки MX записи на DNS сервере. В случае успешной проверки DNS, выводим функцией echo путь к изображению success.gif (зеленая галочка), иначе путь к failure.gif (красный крестик). Обратите внимание, чтобы изображения работали необходимо расположить их в соответствующем каталоге или изменить путь к ним. Наконец, необходимо создать функцию domain_exists, которую мы вызывали в предыдущем блоке кода.

    <?php 
    function domain_exists($email,$record = 'MX') 
    { 
        list($user,$domain) = split('@',$email); 
        return checkdnsrr($domain,$record); 
    } 
    ?>

    Функция просто пропускает электронную почту (после разделения электронной почте на символ @) через функцию checkdnsrr, которая проверяет, что запись MX можно извлечь из доменного имени. В сущности, функция просто проверяет наличие сервера, который будет отвечать на запросы для данного доменного имени. Технически мы все еще можем задать несуществующий адрес электронной почты, поскольку проверяется только существование домена. Далее нам нужно создать вызывающий файл AJAX. Мы назовем этот файл validate_email.js.

    <?php 
    function checkEmail(){ 
        httpObject = getHTTPObject(); 
        if (httpObject != null) { 
            if (!document.getElementById('email').value== ""){ 
                httpObject.open("GET", "../includes/php/validate_email.php?email="+document.getElementById('email').value, true); 
                httpObject.send(null); 
                httpObject.onreadystatechange = setImage; 
            } 
            else
            { 
                document.getElementById('emailflag').innerHTML = "<img src="://:///images/failure.gif">"; 
            } 
        } 
    }
    ?>

    Данный файл включает в себя 3 функции. Первая функция вызывается из формы в первом файле. Эта функция вызывает getHTTPObject для инициализации вызова AJAX, который мы будем использовать. Затем мы проверяем, что поле email в форме содержит данные, если да, то выполняем HTTP GET запрос к php-файлу и передаем адрес электронной почты в текстовом поле. Если поле не содержит данных, то nodiv, созданный после текстового поля, будет содержать изображение, означающее неудачу. Как только состояние HTTP объекта изменяется, вызываем функцию для передачи содержимого изображения.

    <?php 
    function getHTTPObject(){ 
    if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP"); 
    else if (window.XMLHttpRequest) return new XMLHttpRequest(); 
    else { 
    alert("Ваш браузер не поддерживает AJAX."); 
    return null; 
    }
    }
    ?>

    Функция объявляет httpObject, который мы будем использовать, и выдает сообщение об ошибке, если браузер не поддерживает вызов.

    <?php 
    function setImage(){ 
    if(httpObject.readyState == 4){ 
    document.getElementById('emailflag').innerHTML = httpObject.responseText; 
    }}
    ?>

    Функция проверяет состояние объекта, которое должно быть равно 4 (выполнено), если да, то записывает в свойство innerHTML элемента на форме результат вывода php сценария (изображение success.gif или failure.gif ). Убедитесь, что файлы на своих местах. У меня php файл находится в /includes/php/validate_email.php, а javascript-файл в /includes/js/validate_email.js.

    Проверка адреса электронной почты с использованием PHP и AJAX

    Такая форма должна появляться при переходе к главной форме.

    Проверка адреса электронной почты с использованием PHP и AJAX

    Если вы введете правильный адрес электронной почты, зелёная галочка должна появиться на месте крестика.

    Проверка адреса электронной почты с использованием PHP и AJAX

    Если ввести неправильно отформатированный e-mail, снова должен появиться красный крестик. Он также появится, если очистить поле ввода.