JQuery. Применение ajax на примере recaptcha
В этом уроке мы рассмотрим метод ajax и выполним практическое упражнение с применением сервиса recaptcha.
Метод ajax принимает всего лишь два параметра — урл, на который отправляется запрос и настройки. Настроек у метода ajax очень много. Поэтому у разработчика есть широкие возможности управлять настройками ajax запроса.
Метод ajax принимает всего лишь два параметра — урл, на который отправляется запрос и настройки. Настроек у метода ajax очень много. Поэтому у разработчика есть широкие возможности управлять настройками ajax запроса.
В упражнении мы будем использовать сервис recaptcha. Это продукт от компании google. Для внедрения recaptcha на ваш сайт вам нужно зарегистрировать домен для recaptcha и выполнить несколько шагов по ее настройки. Эти шаги мы и реализуем в нашем упражнении.
Код урока - простой ajax запрос (HTML)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$.ajax({
method: "POST",
url: "ajax.php",
dataType: "json",
data: {name: "Камиль", surname: "Абзалов"},
success: function(data) {
console.log(data);
}
});
</script>
</body>
</html>
Код урока - простой ajax запрос (PHP)
<?php
$user['name'] = $_REQUEST['name'];
$user['surname'] = $_REQUEST['surname'];
echo json_encode($user);
Код урока - валидация recaptcha (HTML)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://www.google.com/recaptcha/api.js"></script>
</head>
<body>
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label for="login" class="col-sm-3 control-label">Ваш логин</label>
<div class="col-sm-9">
<input type="text" name="login" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="g-recaptcha" data-sitekey="6Lexmx0UAAAAAIy-_h3BIHSQr6cU30hl_Pyq0dvp"></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-primary">Отправить</button>
</div>
</div>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
$("form").submit(function(e){
e.preventDefault();
var login = $("input").val();
$.ajax({
url: 'handler.php',
type: "post",
data: "login=" + login + "&g-recaptcha-response=" + grecaptcha.getResponse(),
success: function(data) {
if(data === 'ok') {
window.location.href ='hello.php';
} else {
console.log(data);
}
}
})
});
</script>
</body>
</html>
Код урока - валидация recaptcha (PHP)
<?php
if($_POST['g-recaptcha-response']) {
$captcha = $_POST['g-recaptcha-response'];
$secret = "6Lexmx0UAAAAAHNgoPpIsFkeQqWhVUuSqNrWha80";
$json = json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=". $secret . "&response=" . $captcha), true);
if($json['success']) {
echo "ok";
} else {
echo "recaptcha error";
}
} else {
echo "Вы не ввели значение recaptcha";
}
?>
Спасибо!
Иван, спасибо вам за комментарий