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

Технология Ajax

HIT

03.11.2015

1755

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: "https://opttour.ru/wp-content/themes/tester/greetings.php",
data: "username="+$("#username").val(),
success: function(html){
$("#content-test").html(html);
}
});
return false;
});

});
</script>

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




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


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









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




Введите имя:







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






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






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



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

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

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

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

Введите имя:


Пример (свой)
  • Похожие записи
  • Комментарии
  • Вложения
Json Начало

Json Начало

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

Загрузка JavaScript динамически

Загрузка JavaScript динамически

Иногда требуется подгрузить скрипт на лету, в этом поможет технология Ajax. Обычный скрипт JavaScript динамически Создаем файл скрипта script-dinamic.js с содержимым // случайное число от 1 до 100 var rnd Читать далее »

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

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

Подгрузка контента средствами 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
Pixel Grid
Рекомендации для васPixel GridOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.