С помощью AJAX
можно отправить форму и
получить данные без перезагрузки
страницы.
Это технология
связывает между собой PHP
и JS. Это
уменьшает нагрузку на сервер.
Полный контроль.
content.php –
файл-обработчик данных
<?php
sleep(2); // sleep —
Откладывает выполнение на 2 секунды
echo "Данные:
строка - ".$_POST['name']." цифра -
".$_POST['number'];
?>
index.php
<!DOCTYPE
HTML>
<html
lang="en-US">
<head>
<meta
charset="UTF-8">
<title>Test</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function funcBefore() {
$("#information").text("Ожидание
данных!");
}
function funcSuccess(data) {
$("#information").text(data); // data - то,что
придет со страницы content.php
}
$(document).ready(function() {
$("#load").bind("click", function() {
var admin = "Admin";
$.ajax ({
url: "content.php", // куда мы
отправляем данные
type: "POST", // тип отпарвки
данных, обычно это POST
// переменные, которые мы хотим
передать для обработке на странице
content.php
data: ({name: admin, number: 5}),
// Тип передаваемых данных (текст
или html)
dataType: "html",
// то, что будет срабатывать пока
не придет ответ с content.php
// funcBefore - это функция, писать без
круглых душек :)
// beforeSend может не быть
beforeSend: funcBefore,
// когда приходит любой ответ
(успешный или ошибка)
success: funcSuccess
});
});
});
</script>
</head>
<body>
<p
id="load" style="cursor:pointer">Загрузить
данные!</p>
<div id="information"></div> <!-- Сюда
будут подгружаться данные при нажатии
на абзац -->
</body>
</html>
ПРОВЕРКА
ЛОГИНА.
Создадим
текстовое поле и кнопку. При нажатии на
кнопку мы будем проверять занят ли
логин, который ввел пользователь.
Если
занят, то будет подгружаться надпись,
что логин занят, а если нет, то будет
подгружаться введенное имя.
Файл index.php
<!DOCTYPE
HTML>
<html
lang="en-US">
<head>
<meta
charset="UTF-8">
<title>Test</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function funcBefore() {
$("#information").text("Ожидание
данных!");
}
function funcSuccess(data) {
$("#information").text(data); //
data - то,что придет со страницы content.php
}
$(document).ready(function() {
$("#load").bind("click",
function() {
var admin = "Admin";
$.ajax ({
url: "content.php", //
куда мы отправляем данные
type: "POST", // тип
отпарвки данных, обычно это POST
// переменные, которые
мы хотим передать для обработке на
странице content.php
data: ({name: admin, number: 5}),
// Тип передаваемых
данных (текст или html)
dataType: "html",
// то, что будет
срабатывать пока не придет ответ с
content.php
// funcBefore - это функция,
писать без круглых душек :)
// beforeSend может не быть
beforeSend: funcBefore,
// когда приходит любой
ответ (успешный или ошибка)
success: funcSuccess
});
});
// Проверка логина.
$("#done").bind("click",
function() {
$.ajax ({
url: "check.php", // куда
мы отправляем данные
type: "POST", // тип
отпарвки данных, обычно это POST
// передаем значение,
которое введено в поле input
data:({name: $("#name").val()}),
// Тип передаваемых
данных (текст или html)
dataType: "html",
// то, что будет
срабатывать пока не придет ответ с
content.php
// funcBefore - это функция,
писать без круглых душек :)
// beforeSend может не быть
beforeSend: function () {
$("#information").text("Ожидание
данных!");
},
// когда приходит любой
ответ (успешный или ошибка)
success: function (data) {
$("#information").html(data);
}
});
});
});
</script>
</head>
<body>
<input type="text" id="name"
placeholder="Введите имя"/>
<input type="button" id="done"
value="Готово"/>
<p
id="load" style="cursor:pointer">Загрузить
данные!</p>
<div id="information"></div>
<!-- Сюда будут подгружаться данные при
нажатии на абзац -->
</body>
</html>
Файл check.php
<?php
sleep(1);
if($_POST['name']
== "Admin")
echo "Имя: ".$_POST['name']."
занято";
else
echo $_POST['name'];
?>
ФОРМАТ
JSON
Этот
формат позволяет нам передавать массив
на сервер и получать массив с сервера.
Создаем
файл country.php
Делаем 2 селекта.
В одном мы выбираем страны. При выборе
определенной страны у нас будут
подгружаться из файла countryCheck.php названия
городов. Мы будем использовать метод
get.
Файл country.php
<!DOCTYPE
HTML>
<html
lang="en-US">
<head>
<meta
charset="UTF-8">
<title>Find
city</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("select[name='country']").bind("change",
function(){
$("select[name='city']").empty();
// очищаем данные в select
$.get("countryCheck.php",
{country: $("select[name='country']").val()},
function(data){
data = JSON.parse(data); //
раскодируем полученные данные
for(var id in data) {
$("select[name='city']").append($("<option
value='"+ id +"'>" + data[id] + "</option>"));
}
});
});
});
</script>
</head>
<body>
<label>Укажите
страну:</label>
<select name="country">
<option value="0"
selected="selected"></option>
<option value="1">США</option>
<option value="2">Франция</option>
</select>
<label>Города:</label>
<select name="city">
<option value="0"></option>
</select>
</body>
</html>
Файл
countryCheck.php
<?php
if($_GET['country'] == 1) echo json_encode(array("1"=>"Вашингтон",
"2"=>"Сиэтл"));
else if($_GET['country'] == 2) echo json_encode(array("1"=>"Париж",
"2"=>"Марсель"));
?>
Комментариев нет:
Отправить комментарий