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

Технология Ajax

HIT

03.11.2015

2028

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>

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

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

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

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

Введите имя:


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

Тэги:

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

  • Похожие записи
  • Комментарии
  • Вложения
Избранное

Избранное

Реализуем функционал Избранное. Нам надо сделать кнопку добавить в Избранное в шаблоне самой записи и в цикле вывода записей категории. И отдельная страница Избранное где выводятся избранные записи. Плагин Favorites Читать далее »

Подгрузка постов «налету» II: Кнопка

Подгрузка постов «налету» II: Кнопка

Данный вариант подгрузки постов «налету» является альтернативой подгрузке постов при скроллинге. Только в данном методе посты будут подгружаться по нажатию на кнопку. Также учтены некоторые особенности шаблона данного сайта высота Читать далее »

Массовое редактирование свойств товаров

Массовое редактирование свойств товаров

Быстрое изменение товаров Для того чтобы массово отредактировать товары woocommerce нужно установить плагин Woocommerce advanced bulk edit. В репозитории плагинов WordPress его нет, он платный. Если поискать на просторах интернета Читать далее »

/ /

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

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

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