/ Scripts & jquery / Технология Ajax

Технология Ajax

HIT

03.11.2015

2638

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

Простой запрос и обновление контента

Создаем файл time.php с содержимым

<?php echo date("H:i:s"); ?>

Создаем контейнер

<div id="time-test"></div>

Скрипт

<script>
function show()
{
$.ajax({
url: "https://opttour.ru/wp-content/themes/tester/time.php",
cache: false,
success: function(html){
$("#time-test").html(html);
}
});
}

$(document).ready(function(){
show();
setInterval('show()',1000);
});
</script>

Подгрузка контента

Создаем тестовую верстку

<p>Какую страницу желаете открыть?</p>
<form>
<input id="btn1" type="button" value="Страница 1">
<input id="btn2" type="button" value="Страница 2">
</form>
<div id="testov"></div>
<script>
$(document).ready(function(){

$('#btn1').click(function(){
$.ajax({
url: "https://opttour.ru/main-rublik/web/adaptivnost/poraboshhenie-iframe/",
cache: false,
success: function(html){
$("#testov").html(html);
}
});
});

$('#btn2').click(function(){
$.ajax({
url: "https://opttour.ru/main-rublik/web/wordpress/poleznyie-zaprosyi-wp/",
cache: false,
success: function(html){
$("#testov").html(html);
}
});
});

});
</script>

Отправка информации на сервер

Создаем файл greetings.php с содержимым

<?php   
    echo "Приветствую, ".$_REQUEST['username']."!";  
echo "В вашем имени букв: ".strlen($_REQUEST['username']).".";  
?>

Верстка

<form id="myForm">
Введите имя:<br/>
<input id="username" type="text" size="20"><br/><br/>
<input type="submit" value="Отправить">
</form>

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

Скрипт

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

$('#myForm').submit(function(){
$.ajax({
type: "POST",
url: "/wp-content/themes/tester/greetings.php",
data: "username="+$("#username").val(),
success: function(html){
$("#content-test").html(html);
}
});
return false;
});

});
</script>

Примеры

<h2>Простой запрос и обновление контента</h2>
<div id="time-test"></div>

<h2>Подгрузка контента</h2>
    <p>Какую страницу желаете открыть?</p>  
    <form>  
        <input id="btn1" type="button" value="Страница 1">   
        <input id="btn2" type="button" value="Страница 2">  
    </form>  
    <div id="testov"></div>


<h2>Отправка информации на сервер</h2>

<form id="myForm">  
    Введите имя:<br/>  
        <input id="username" type="text" size="20"><br/><br/>  
        <input type="submit" value="Отправить">  
    </form>  
      
    <div id="content-test"></div>  
<h2>Простой запрос и обновление контента</h2>

<script>  
        function show()  
        {  
            $.ajax({  
                url: "/wp-content/themes/tester/test/time.php",  
                cache: false,  
                success: function(html){  
                    $("#time-test").html(html);  
                }  
            });  
        }  
      
        $(document).ready(function(){  
            show();  
            setInterval('show()',1000);  
        });  
    </script> 


<h2>Подгрузка контента</h2>

    <script>  
        $(document).ready(function(){  
          
            $('#btn1').click(function(){  
                $.ajax({  
                    url: "/main-rublik/web/adaptivnost/poraboshhenie-iframe/",  
                    cache: false,  
                    success: function(html){  
                        $("#testov").html(html);  
                    }  
                });  
            });  
              
            $('#btn2').click(function(){  
                $.ajax({  
                    url: "/main-rublik/web/wordpress/poleznyie-zaprosyi-wp/",  
                    cache: false,  
                    success: function(html){  
                        $("#testov").html(html);  
                    }  
                });  
            });  
              
        });  
    </script> 


<h2>Отправка информации на сервер</h2>

    <script>  
        $(document).ready(function(){  
          
            $('#myForm').submit(function(){  
                $.ajax({  
                    type: "POST",  
                    url: "/wp-content/themes/tester/test/greetings.php",  
                    data: "username="+$("#username").val(),  
                    success: function(html){  
                        $("#content-test").html(html);  
                    }  
                });  
                return false;  
            });  
              
        });  
    </script>

Простой запрос и обновление контента

Подгрузка контента

Какую страницу желаете открыть?

Отправка информации на сервер

Введите имя:


Пример (свой)

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Открывать запись во всплывающем окне

Открывать запись во всплывающем окне

Задача: открывать запись во всплывающем окне используя загрузку «налету» (ajax). При этом работает сколько угодно раз, т.е. при нажатии на каждую ссылку — загружается соответствующая запись по ID из ссылки. Читать далее »

Отложенная загрузка изображений

Отложенная загрузка изображений

Если на странице есть несколько изображений или есть изображения дублирующиеся на всех страницах (header, footer), то чтобы ускорить общую загрузку сайта, можно установить для изображений отложенную загрузку. Изображение будет появляться Читать далее »

Имитация Ajax загрузки контента

Имитация Ajax загрузки контента

Создадим эффект перехода внутри сайта имитирующий подгрузку контента ajax’ом, как будто без перезагрузки. Принцип эффекта: при переходе по ссылке плавно скрываем изменяемую часть контента, и при загрузке новой плавно ее Читать далее »

Добавить комментарий

Пока нет комментариев. Будь первым!

Технология Ajax
Поделиться в соц.сетях
Рекомендации для васПоделиться в соц.сетяхOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.