Архив рубрики: AJAX

AJAX Показ и скрытие контента по нажатию на элемент

ajax_hide_show Необходимо по нажатию показать некий контент, при повторном нажатии его скрыть.

Это можно сделать с помощью нескольких AJAX функций:

1. fadeToggle(«slow»);

Пример листинг

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<div id=sl>Коротко</div><br><br>
<div id=sll>
<img src="jpg.jpg">
по нажатию <br>
Показываем и скрываем блок контента. Показываем и скрываем блок контента.
Показываем и скрываем блок контента. Показываем и скрываем блок контента.
Показываем и скрываем блок контента. Показываем и скрываем блок контента.
Показываем и скрываем блок контента. Показываем и скрываем блок контента.
</div>
<script>
$("#sl").click(function () {
$("#sll").fadeToggle("slow");
});
</script>
</body>
</html>

2. .toggle()

Пример листинг

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<div id=sl>Коротко</div><br>
<div id=sll>
<img src="jpg.jpg">
по нажатию <br>
Показываем и скрываем блок контента. Показываем и скрываем блок контента.
Показываем и скрываем блок контента. Показываем и скрываем блок контента.
Показываем и скрываем блок контента. Показываем и скрываем блок контента.
Показываем и скрываем блок контента. Показываем и скрываем блок контента.
<script>
$("#sl").toggle(function() {
$("#sll").slideUp("slow");
}, function() {
$("#sll").slideDown("slow");
});
</script>
</body>
</html>

Тоже самое можно проделать силами только CSS3 пример тут

PHP — Перевод русских букв на транслит

Необходимо перевести русские буквы на транслит. Будем использовать языки AJAX и PHP.

Шаг первый

Создаем форму для ввода текста, который будем конвертировать в транслит.

Листинг пример формы

<form id="myForm">
Текст на русском для транслита:<br/>
<textarea rows="15" cols="50" id="t1" style="float:left"></textarea>
<textarea id="transl" rows="15" cols="50"></textarea>
<br/>
<input class="b"type="button" value="перевести" id="butt"/>
</form>

Шаг второй

Пишем след AJAX код для обработки нажатия на кнопку

<script>
$(document).ready(function(){

$('#butt').click(function(){
$.ajax({
type: "POST",
url: "translate.php",
data: "t1="+$("#t1").val(),
success: function(html){
$("#transl").html(html);
}
});
return false;
});

});
</script>

Шаг третий

пишет обработчик в файле translate.php

$str=$_REQUEST['t1'];

function translit($str)
{
$tr = array(
"А"=>"A","Б"=>"B","В"=>"V","Г"=>"G",
"Д"=>"D","Е"=>"E","Ж"=>"J","З"=>"Z","И"=>"I",
"Й"=>"Y","К"=>"K","Л"=>"L","М"=>"M","Н"=>"N",
"О"=>"O","П"=>"P","Р"=>"R","С"=>"S","Т"=>"T",
"У"=>"U","Ф"=>"F","Х"=>"H","Ц"=>"TS","Ч"=>"CH",
"Ш"=>"SH","Щ"=>"SCH","Ъ"=>"","Ы"=>"YI","Ь"=>"",
"Э"=>"E","Ю"=>"YU","Я"=>"YA","а"=>"a","б"=>"b",
"в"=>"v","г"=>"g","д"=>"d","е"=>"e","ж"=>"j",
"з"=>"z","и"=>"i","й"=>"y","к"=>"k","л"=>"l",
"м"=>"m","н"=>"n","о"=>"o","п"=>"p","р"=>"r",
"с"=>"s","т"=>"t","у"=>"u","ф"=>"f","х"=>"h",
"ц"=>"ts","ч"=>"ch","ш"=>"sh","щ"=>"sch","ъ"=>"y",
"ы"=>"yi","ь"=>"'","э"=>"e","ю"=>"yu","я"=>"ya",
"."=>".","?"=>"?","/"=>"_","\\"=>"_",
"*"=>"_",":"=>":","*"=>"_","\""=>"_","<"=>"_",
">"=>"_","|"=>"_"
);
return strtr($str,$tr);
};
$tans=translit($str);
echo $tans;

Готовый пример онлайн перевода в транслит (транслитирования)

AJAX и PHP — работа с базой данных

Задача:

Динамический показ данных (товар) в зависимости от выбора элемента (категория) в выпадающем списке , используя AJAX.

Решение (Пример):

Шаг 1

Создать файл index.php, в котором

подключаемся к базе данных для получения списка категории

Листинг файла подключения к БД auth.php

<?
$hostname = "localhost"; // название/путь сервера, с MySQL
$username = "root"; // имя пользователя (в Denwer`е по умолчанию "root")
$password = ""; // пароль пользователя (в Denwer`е по умолчанию пароль отсутствует, этот параметр можно оставить пустым)
$dbName = "test"; // название базы данных

/* Создаем соединение */
mysql_connect($hostname, $username, $password) or die ("Не могу создать соединение");
mysql_query('SET NAMES utf8') or header('Location: Error');

/* Выбираем базу данных. Если произойдет ошибка - вывести ее */
mysql_select_db($dbName) or die (mysql_error());
?>

выводим форму с выпадающим списком из этих категорий

пишем AJAX запрос на обработку выбранного элемента

Листинг файла с AJAX запросом index.php

<?php
include "auth.php";//Подключаем БД
//делаем запрос на категории
$query = "select * from allcat where Id_parent=0 ";
$result = mysql_query($query) or die(mysql_error());
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<form id="myForm">
Выберите Категорию:<br/>
<select id="idcat">
<?php
//Выводим категории и ее ID
while ($row=mysql_fetch_array($result))
{
print "<option value=".$row['Id_cat'].">";
print $row['Name'];
echo("</option>");
}
?>
</select>
</form>

<div id="content"></div>

<script>
$(document).ready(function(){

$('#idcat').change(function(){
$.ajax({
type: "POST",
url: "show.php",
data: "idcat="+$("#idcat").val(),
success: function(html){
$("#content").html(html);
}
});
return false;
});

});
</script>

</body>
</html>

Шаг 2

Создать файл show.php, в котором обрабатываем AJAX запрос

подключаемся к базе данных для получения списка товаров по ID категории
выводим полученные товары

Листинг файла для обработки запроса show.php

<?php
include "auth.php"; //Подключаем БД
//делаем запрос на товары этой категории
$query = "select * from allcat where Id_parent=".$_REQUEST['idcat']."";
$result = mysql_query($query) or die(mysql_error());
// выводим товары полученные по запросу
while ($row=mysql_fetch_array($result))
{
print $row['Name']."<br>";
}
?>

IT Памятка

Чтобы не забыть и впоследствии освежить память