Ранее мы рассмотрели отправку простых запросов. Теперь посмотрим, как мы можем в запросе отправлять параметры.
В прошлых темах использовались методы, которые могли увеличивать рейтинг ответов. Но все эти изменения происходили локально. И если мы загружаем данные с сервера, то соответственно надо также дать серверу знать о произведенных изменениях.
Для для взаимодействия с сервером нам надо уникально идентифицировать каждый пост с ответом. Поэтому вначале добавим в определение объектов в файле question.json параметр id:
{
"question":{
"text": "Какой js-фреймворк лучше использовать?",
"author": "Иван Иванов",
"date": "20/10/2013",
"answers":
[{
"id" : 1,
"text": "AngularJS!",
"author": "Вова Сидоров",
"date": "20/10/2013",
"rate":2
},{
"id" : 2,
"text": "AngularJS лучше всех",
"author": "Олег Кузнецов",
"date": "21/10/2013",
"rate":3
}]
}
}
Страница index.html остается такой же:
<!doctype html>
<html ng-app="questApp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/mystyles.css" />
</head>
<body>
<div ng-controller="QuestionController">
<div class="content">
<div class="quest">
<h3>{{question.text}}</h3>
<p>{{question.author}} </p> <p><i>{{question.date}}</i></p>
</div>
<h3>Ответы</h3>
<div class="answers">
<div ng-repeat="answer in question.answers | orderBy:sortparam" class="answer">
<div class="vote">
<a class="vote-up" ng-click="voteUp(answer)"></a>
<span class="rate">{{answer.rate}}</span>
<a class="vote-down" ng-click="voteDown(answer)"></a>
</div>
<b>{{answer.text}}</b>
<p>{{answer.author}}</p>
<p><i>{{answer.date}}</i></p>
</div>
</div>
</div>
<script src="js/lib/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/QuestionController.js"></script>
</body>
</html>
И теперь определим отправку на сервер соответствующих запросов в контроллере QuestionController:
questApp.controller('QuestionController',
function QuestionController($scope, $http){
$http.get('question.json').then(function success(response) {
$scope.question = response.data.question;
});
$scope.voteUp = function (answer){
$http({method:'GET', url:'setAnswer.php', params: {'id':answer.id, 'up': true}}).
then(function success(response) {
answer.rate++;
console.log(response.data);
})
};
$scope.voteDown = function (answer){
$http({method:'GET', url:'setAnswer.php', params: {'id':answer.id,'up': false}}).
then(function success(response) {
answer.rate--;
console.log(response.data);
})
};
}
)
Для установки параметров используется параметр params, который принимает два параметра: id ответа и булевое значение, показывающее, было ли увеличение рейтинга.
В качестве ресурса для запроса определен скрипт setAnswer.php, но с учетом параметров фактический адрес запроса выглядит так: setAnswer.php?id=[answer.id]&up=[true или false]
Скрипт setAnswer.php может выглядеть так:
<?php
if(isset($_GET['id']) && isset($_GET['up']))
{
$id = $_GET['id'];
$up = $_GET['up'];
// обновление данных в json-файле или базе данных
$data = array("id"=> $id, "up" => $up);
// отдаем обратно объект
echo json_encode($data);
}
else
{
echo "Введенные данные некорректны";
}
?>