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

Технология Ajax

HIT

03.11.2015

2709

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

Фильтр Ajax

Очередная попытка сделать фильтр wordpress, в этот раз применяя технологию ajax. По сути программирование фильтра — это изобретение велосипеда, но есть 2 момента: во-первых в процессе я начинаю лучше понимать Читать далее »

/
Новинка (товар NEW полем)

Новинка (товар NEW полем)

Ранее были рассмотрены варианты добавления лэйбла New полуавтоматическим способом (последние созданные товары, либо по времени от текущего), либо назначением метки NEW. Здесь разберем как сделать данный функционал полем и какие Читать далее »

/
Json Начало

Json Начало

JSON (JavaScript Object Notation) — это текстовый протокол обмена данными, чем-то похожий на более привычный XML, но данные записываются в нем более компактно. Изначально он был разработан для нужд JavaScript Читать далее »

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

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

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