Отправка запроса и получение ответа
При взаимодействии с сервером в нашем распоряжении есть грубо говоря два подхода: REST API и стандартная отправка данных, например, методом POST. Оба этих подхода имеют некоторые различия:
В зависимости от подхода содержимое заголовка
content-typeв AJAX-запросе может отличаться. По умолчанию при отправке формы через AJAX в jQuery для этого заголовка применяется значение application/x-www-form-urlencoded. Это значение используется для стандартного запроса POST.А при применении подхода REST API тот заголовок должен иметь значение application/json, если мы отправляем данные в формате JSON
Также в зависимости от подхода может отличаться содержимое формы. При отправке данных методом POST данные сериализуются в обычный объект JavaScript, который представляет набор пар ключ/значение. А при взаимодействии через JSON в REST API данные формы сериализуются в формат JSON.
Поэтому в зависимости от подхода мы будем использовать разные функции Knockout для сериализации объектов.
Рассмотрим простейший пример взаимодействия Knockout с сервером. Для этого нам прежде всего надо определить некоторый функционал на стороне сервера с использованием одной из серверных технологий, который будет принимать и возвращать клиентскому коду некоторые данные.
Пусть сервер получает две строки (условно логин и пароль), инвертирует их задом наперед и возвращает клиенту.
Если мы на сервере работаем с PHP, то мы могли бы определить такой скрипт:
<?php
if(!isset($_POST['login']) || !isset($_POST['password']))
header('HTTP/1.1 500 Internal Server Error');
$login = strrev($_POST['login']);
$password = strrev($_POST['password']);
$data = array("login"=>$login, "password"=>$password);
header('Content-Type: application/json');
echo json_encode($data);
?>
Если технологией стороны сервера является ASP.NET MVC 5, то мы могли бы определить в контроллере следующий метод для обработки запроса:
[HttpPost]
public JsonResult PostData(string login, string password)
{
Response.AppendHeader("Access-Control-Allow-Origin", "*");
login = new string( login.Reverse().ToArray<Char>());
password = new string(password.Reverse().ToArray<Char>());
return Json(new { login, password });
}
И теперь чтобы обращаться к серверу, определим следующий код клиентской стороны:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Работа с сервером в KnockoutJS</title>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js"></script>
</head>
<body>
<form data-bind="submit: submitHandler, with: user">
<input type="text" name="login" data-bind="textInput: login" />
<input type="text" name="password" data-bind="textInput: password" />
<button type="submit">Отправить</button>
</form>
<p data-bind="text: ko.toJSON(user)"></p>
<script type="text/javascript">
function AppViewModel(){
self=this;
self.user = {
login: ko.observable("login"),
password: ko.observable("password")
};
self.submitHandler = function() {
var userInfo = ko.toJS(self.user);
$.ajax({
//url: 'http://localhost:52321/home/postdata',
url: 'http://localhost:8080/postdata.php',
data: userInfo,
type: 'POST',
contentType: 'application/x-www-form-urlencoded'
}).success(self.successHandler).error(self.errorHandler);
};
self.successHandler = function(data) {
self.user.login(data.login);
self.user.password(data.password);
alert("Success!");
};
self.errorHandler = function() {
alert("Error!");
};
};
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
Здесь все основные данные инкапсулированы в свойстве self.user, к которым на форме установлена привязка.
А обработчик отправки формы submitHandler выполняет с помощью jQuery ajax-запрос к серверу и обрабатывает полученные от сервера данные.
Как видно, в данном случае используется стандартный запрос POST. Заголовок contentType имеет значение
application/x-www-form-urlencoded. А для сериализации отправляемых данных применяется функция ko.toJS().
В результате после нажатия на кнопку на сервер отправятся введенные в поля формы данные? и затем эти поля отобразят уже инвертированные значения:
- Глава 1. Введение в KnockoutJS
- Глава 2. Основы привязки
- Глава 3. Работа с формами
- Глава 4. Взаимодействие с сервером