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

Технология Ajax

HIT

03.11.2015

2309

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>

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

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

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

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

Введите имя:


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

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Юр. или физ. лицо при оформлении

Юр. или физ. лицо при оформлении

Расширим функционал Woocommerce выбором при оформлении заказа: юр. или физ. лицо. Естественно данный выбор будет влиять на множество аспектов самого процесса заказа и прочих функций WC. Создание переключателя и полей Читать далее »

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

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

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

Варианты при вводе запроса в поиск

Варианты при вводе запроса в поиск

При вводе поискового запроса удобно чтобы сразу выводились несколько вариантов с ссылками на страницы с искомым словосочетанием. Реализуем это минимальными действиями. Подлючение скрипта и стилей Подключаем все необходимые стили и Читать далее »

/

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

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

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