JavaScript. XMLHttpRequest. POST запросы и создание простой формы комментариев
На прошлом уроке мы рассматривали GET запросы при помощи xmhttprequest. В этом уроке мы рассмотрим, как делать post запросы при помощи данного объекта.
Различие в реализации запроса GET и запроса POST кроется в способе передачи данных. В GET запросах данные передаются в url строке. В POST данные передаются через тело запроса. Кроме того, необходимо установить заголовок Content-Type при помощи метода setRequestHeader.
Важно помнить, что мы работаем с данными, так или иначе полученными от пользователя. А значит такие данные надо проверять на корректность. Чтобы защитить данные на клиенте во время передачи запроса, необходим их закодировать при помощи функции encodeURIComponent. Настоятельно рекомендую использовать эту функцию при передаче данных через xmlhttprequest.
Как уже было упомянуто выше, при передаче данных методом POST, необходимо передавать тело запроса.
Поэтому во время вызова метода send мы должны передать ему параметр тела запроса. В коде ниже это параметр body.
Важно помнить, что мы работаем с данными, так или иначе полученными от пользователя. А значит такие данные надо проверять на корректность. Чтобы защитить данные на клиенте во время передачи запроса, необходим их закодировать при помощи функции encodeURIComponent. Настоятельно рекомендую использовать эту функцию при передаче данных через xmlhttprequest.
Как уже было упомянуто выше, при передаче данных методом POST, необходимо передавать тело запроса.
Поэтому во время вызова метода send мы должны передать ему параметр тела запроса. В коде ниже это параметр body.
Код урока (HTML)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
// метод encodeURIComponent предотвращает прием нежеланных данных
// на сервере
var login = "login";
var pass = "pass";
//var data = "login &token=1";
//var json = JSON.stringify({username: "Камиль",pass: 123});
var xhr = new XMLHttpRequest();
var body = "login=" + encodeURIComponent(login) + "&pass=" + encodeURIComponent(pass);
xhr.open("POST", 'file.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(body);
xhr.onreadystatechange = function() {
console.log(xhr.responseText);
}
</script>
</body>
</html>
Код урока (PHP)
<?php
print_r($_POST);
Итогом вводных уроков в ajax (xmlhttprequest) будет создание простой формы комментариев — мы вводим текст комментария, который добавляется в базу данных и выводится на страницу с другими комментариями.
Создание формы комментариев (HTML)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
font-family: Arial;
font-size: 1em;
}
#posts {
max-width: 1200px;
margin: 0 auto;
}
#comments {
max-width: 1000px;
float: right;
}
#comments .commentItem p {
margin: 0 0 10px;
}
.clearfix {
clear: both;
}
#commentForm textarea {
width: 80%;
min-height: 100px;
border: 1px solid #deb4b4;
border-radius: 4px;
padding: 10px;
margin: 10px 0;
}
</style>
</head>
<body>
<div id="posts">
<div class="postItem">
<h1>JavaScript</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam dolor non molestiae laboriosam nemo dolore quo repellat rem, consectetur eius nihil provident fugiat beatae dolorem delectus temporibus eveniet nesciunt accusantium.</p>
</div>
<div id="comments">
<h2>Комментарии к посту</h2>
<div class="commentItem">
<p class="commentText">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, rem ipsa eaque consectetur laudantium asperiores aliquam sapiente consequuntur pariatur sequi culpa iste! Aspernatur ex voluptas, necessitatibus ullam accusamus. Earum, consequatur?
</p>
</div>
</div>
<div class="clearfix"></div>
<hr>
<div>
<form id="commentForm">
<div>
<label for="comment">Введите комментарий</label>
</div>
<div>
<textarea name="comment" id="comment"></textarea>
</div>
<button type="submit" name="button">Отправить</button>
</form>
</div>
</div>
<script src="comment.js"></script>
</body>
</html>
Создание формы комментариев (JS)
var form = document.getElementById("commentForm");
form.onsubmit = function(e) {
e.preventDefault();
var comment = document.getElementById("comment").value;
var xhr = new XMLHttpRequest();
var body = "comment=" + encodeURIComponent(comment);
xhr.open("POST", 'comment.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(body);
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
var data = (xhr.responseText);
var res = JSON.parse(data);
for(prop in res) {
var div = document.createElement('div');
var p = document.createElement('p');
var parentEl = document.getElementById('comments');
div.className = 'commentItem';
p.innerHTML = res[prop];
div.appendChild(p);
parentEl.appendChild(div);
}
}
}
}
Создание формы комментариев (PHP)
<?php
/*
**Конфиг подключения к БД
*/
$user = "root";
$pass = "root";
$db = new PDO("mysql:host=localhost;dbname=comment", $user, $pass);
$comment = trim($_POST['comment']);
addComment($db, $comment);
echo json_encode(getComments($db));
function addComment($db, $comment) {
$sql = "INSERT INTO comment(comment_text) VALUES(:comment)";
$stmt = $db->prepare($sql);
$stmt->bindValue(":comment", $comment, PDO::PARAM_STR);
$stmt->execute();
}
function getComments($db) {
$sql = "SELECT * FROM comment";
$stmt = $db->prepare($sql);
$stmt->execute();
$res = array();
while($row = $stmt->fetch()) {
$res[$row['comment_id']] = $row['comment_text'];
}
return $res;
}
ьорпм