/ Сайтостроение / Scripts & jquery / Технология Ajax

Технология Ajax

HIT

03.11.2015

1840

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 целые куски кода, в том числе и php. Сам метод действительно оказался прост. В данной статье опишем ситуации где этот Читать далее »

/
Загрузка контента без перезагрузки

Загрузка контента без перезагрузки

Подгрузка контента средствами Ajax Создаем тестовую верстку <p>Какую страницу желаете открыть?</p> <form> <input onclick="showContent('https://opttour.ru/main-rublik/sites/fotofit/')" type="button" value="Страница 1"> <input onclick="showContent('https://opttour.ru/main-rublik/sites/dtex/')" type="button" value="Страница 2"> </form> <div id="contentBody"></div> <div id="loading" style="display: none"> Идет Читать далее »

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

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

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

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

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

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