JQuery. Ajax example with recaptcha
In this lesson we’ll consider jquery ajax method and do exercise with google recaptcha using.
Ajax method has got two parameters – url, which accept data form ajax and settings. Settings is a large array. It gives possibility developer to control ajax request settings.
Ajax method has got two parameters – url, which accept data form ajax and settings. Settings is a large array. It gives possibility developer to control ajax request settings.
In our exercise we’ll use recaptcha service. This is google product. For Integration recaptcha to your site you need do several steps. This steps we’ll make with ajax in this exercise.
Code lesson -simple ajax request (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>
Code lesson - simple ajax request (PHP)
<?php
$user['name'] = $_REQUEST['name'];
$user['surname'] = $_REQUEST['surname'];
echo json_encode($user);
Code lesson - recaptcha validation (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>
Code lesson - recaptcha validation (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";
}
?>
0 Comments