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>Простой запрос и обновление контента
Подгрузка контента
Какую страницу желаете открыть?
