Pro jQuery
Адам Фриман
Подготовка сервера Node.js
В этой главе вы будете использовать Node.js
, для получения и обработки данных формы из браузера. Я не хочу вдаваться в подробности о том, как работает Node.js
, но одной из причин, почему я выбрал его для этой книги, является то, что Node.js
выстроен вокруг JavaScript, что обозначает, что можно использовать те же самые навыки программирования для серверной части, как и клиентской части.
Совет
Если вы хотите воспроизвести пример из этой главы, вам стоит посмотреть главу 1, чтобы освежить информацию о
Node.js
. Серверный скрипт, также как и все HTML документы, можно скачать на Apress.com.
В листинге 13-1 показан серверный скрипт, который мы будем использовать в этой главе. В данном случае я представляю его как черный ящик и объясню только входные данные и результат.
Листинг 13-1: Скриптformserver.js
Node.js
var http = require('http');
var querystring = require('querystring');
http.createServer(function (req, res) {
console.log("[200 OK] " + req.method + " to " + req.url);
if (req.method == 'POST') {
var dataObj = new Object();
var contentType = req.headers["content-type"];
var fullBody = '';
if (contentType) {
if (contentType.indexOf("application/x-www-form-urlencoded") > -1) {
req.on('data', function (chunk) { fullBody += chunk.toString(); });
req.on('end', function () {
res.writeHead(200, "OK", { 'Content-Type': 'text/html' });
res.write('<html><head><title>Post data</title></head><body>');
res.write('<style>th, td {text-align:left; padding:5px; color:black}\n');
res.write('th {background-color:grey; color:white; min-width:10em}\n');
res.write('td {background-color:lightgrey}\n');
res.write('caption {font-weight:bold}</style>');
res.write('<table border="1"><caption>Form Data</caption>');
res.write('<tr><th>Name</th><th>Value</th>');
var dBody = querystring.parse(fullBody);
for (var prop in dBody) {
res.write("<tr><td>" + prop + "</td><td>" + dBody[prop] + "</td></tr>");
}
res.write('</table></body></html>');
res.end();
});
}
}
}
}).listen(80);
console.log("Ready on port 80");
Чтобы запустить скрипт, в командной строке я ввожу следующее:
node.exe formserver.js
Командная строка будет другой, если вы используете другую операционную систему. Для информации посмотрите документацию по Node.js
. Чтобы продемонстрировать функционал Node.js
, который вы будете использовать в этой главе, вам нужно вернуться к примеру документа, который будет показан в листинге 13-2.
Листинг 13-2: Пример документа для этой главы
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script src="jquery-1.7.js" type="text/javascript"></script>
<script src="jquery.tmpl.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript">
$(document).ready(function () {
var data = [
{ name: "Astor", product: "astor", stocklevel: "10", price: "2.99" },
{ name: "Daffodil", product: "daffodil", stocklevel: "12", price: "1.99" },
{ name: "Rose", product: "rose", stocklevel: "2", price: "4.99" },
{ name: "Peony", product: "peony", stocklevel: "0", price: "1.50" },
{ name: "Primula", product: "primula", stocklevel: "1", price: "3.12" },
{ name: "Snowdrop", product: "snowdrop", stocklevel: "15", price: "0.99" },
];
var templResult = $('#flowerTmpl').tmpl(data);
templResult.slice(0, 3).appendTo('#row1');
templResult.slice(3).appendTo("#row2");
});
</script>
<script id="flowerTmpl" type="text/x-jquery-tmpl">
<div class="dcell">
<img src="${product}.png" />
<label for="${product}">${name}: </label>
<input name="${product}" value="0" required />
</div>
</script>
</head>
<body>
<h1>Jacqui's Flower Shop</h1>
<form method="post" action="http://node.jacquisflowershop.com/order">
<div id="oblock">
<div class="dtable">
<div id="row1" class="drow">
</div>
<div id="row2" class="drow">
</div>
</div>
</div>
<div id="buttonDiv">
<button type="submit">Place Order</button></div>
</form>
</body>
</html>
Отдельные элементы продукции сгенерированы при помощи шаблона данных (как описано в главе 12). Я указал значение для атрибута action
элемента form
, что обозначает, форма будет отправлять данные методом POST
на следующий URL:
http://node.jacquisflowershop.com/order
Я использую два различных сервера. Первый сервер (www.jacquisflowershop.com
) вы используете на протяжении всей книги. Он передает статический контент, такой как HTML документы, скриптовые файлы и картинки. Для меня это Microsoft’s IIS 7.5, но вы можете использовать любой другой сервер, который вам нравится (я использую IIS, потому что множество моих книг написаны о технологиях веб программирования Microsoft, и мой сервер уже настроен и запущен).
Второй сервер (node.jacquisflowershop.com
) запускает Node.js
(используя скрипт, показанный выше), и когда вы отправляете form
из примера документа, серверу будут отправлены данные. В этой главе меня не особо интересует то, что делает сервер, когда получает данные. Мы сфокусируемся на самой форме. На рисунке 13-1 видно, что я вставил в элементы input
документа некоторые значения.
Рисунок 13-1: Добавление данных в элементы input
Когда я нажимаю на кнопку Place Order, форма отправляется на сервер Node.js
, и обратно браузеру приходит простой ответ, как показано на рисунке 13-2.
Рисунок 13-2: Ответ от сервера Node.js
Я знаю, что это не очень захватывающий ответ, но сейчас нам нужно просто куда-то отправить данные, и я не хочу отходить от темы и углубляться в мир разработки серверных приложений.