Javascript-форум (https://javascript.ru/forum/)
-   Node.JS (https://javascript.ru/forum/node-js-io-js/)
-   -   Передача Form в js (https://javascript.ru/forum/node-js-io-js/70897-peredacha-form-v-js.html)

kolfer 10.10.2017 15:48
Передача Form в js
 
Доброго времени суток, господа эксперты
Не имею особо опыта в node.js, но хочу делать проект через него, а не через php. 
<form action="CreateGuest.js">
    Фамилия:<INPUT  TYPE=text NAME=Name SIZE=35 id="surname"><br>
    Имя:<INPUT  TYPE=text NAME=Name SIZE=35 id="name"><br>
    Отчество:<INPUT  TYPE=text NAME=Name SIZE=35 id="patronymic"><br>
    <p><input type="submit"></p>
</form>

Есть вот такая форма, мне необходимо, что бы по нажатию кнопки, данные введенные в input присваивались переменным x,y,z, находящимся в файле CreateGuest.js.
var mysql = require('mysql');

var con = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "password",
    database:   "COTC"
});
con.connect(function(err) {
    if (err) throw err;
    console.log("Connected!");
    var sql = "INSERT INTO customers (surname, name, patronymic) VALUES ("+x+', '+y+', '+z+')';
    con.query(sql, function (err, result) {
        if (err) throw err;
        console.log("1 record inserted");
    });
});

Audaxviator 10.10.2017 19:37
Это не просто.
В форме надо написать так:
<form name="my-form" method="POST" action="/bla-bla-bla">

Причём (что неожиданно), поля формы должны-таки иметь разные значения атрибута "name".
А на сервере надо написать такой обработчик:
app.post('/bla-bla-bla', function(req, res) {
  console.log(req.body);
  // объект req.body будет, как не странно, включать в себя значения
  // атрибутов name формы в качестве ключей, значения которых присвоить
  // любым переменным - самая лёгкая часть этой операции.
}

Nexus 10.10.2017 19:45
Цитата:
Сообщение от Audaxviator
Причём (что неожиданно), поля формы должны-таки иметь разные значения атрибута "name".
Что же тут неожиданного?))
Было бы куда неожиданнее, если бы каждое поле формы имело одно значение, а сервер чудесным образом угадал правильные ключи для переданных ему полей.

kolfer 12.10.2017 18:05
Цитата:
Сообщение от Audaxviator (Сообщение 467131)
Это не просто.
В форме надо написать так:
<form name="my-form" method="POST" action="/bla-bla-bla">

Причём (что неожиданно), поля формы должны-таки иметь разные значения атрибута "name".
А на сервере надо написать такой обработчик:
app.post('/bla-bla-bla', function(req, res) {
  console.log(req.body);
  // объект req.body будет, как не странно, включать в себя значения
  // атрибутов name формы в качестве ключей, значения которых присвоить
  // любым переменным - самая лёгкая часть этой операции.
}
/bla-bla-bla это имя принимающего файла?
Вбиваю вот так, но результат вы видите на картинке, не понимаю, в чем ошибка
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form name="ex" method="post" action="1.js">
    Фамилия:<INPUT  TYPE=text NAME=surname SIZE=35><br>
    Имя:<INPUT  TYPE=text NAME=Name SIZE=35><br>
    Отчество:<INPUT  TYPE=text NAME=patronymic SIZE=35><br>
    <p><input type="submit"></p>
</form>
</body>
</html>



app.post('1.js', function(req, res) {
    console.log(req.body);
})


Audaxviator 12.10.2017 18:25
'/bla-bla-bla' - это просто строка. Произвольная строка.
Не существует синтаксической связи между строкой запроса и обработчиком запроса.
Кроме той связи, что строка pathname - первый аргумент метода app.post(...), а обработчик - второй (или третий, четвёртый...) аргумент этого же метода.
Эти строчки URL-запросов обычно придумывают так, чтобы самому нравилось и было понятно - про что этот запрос.

А, ну и вообще, тут имеется в виду Express, конечно. Не "чистый Node".
Но можно, конечно, и без Експресса обойтись, но тогда я советовал бы вам отправить GET-запрос. Если стереть из тега form атрибут method совсем, то - по умолчанию - браузер отправить поля формы строкой запроса через вопросик после pathname, а ловить её на сервере тогда надо в объекте req.query - предварительно распарсив строку посредством нативного модуля url и декодировав (если там вдруг русские буквы окажутся).

kolfer 16.10.2017 21:31
Спасибо, Express именно то, что я искал:dance:

Audaxviator 17.10.2017 11:09
Пожалста. Но для упражнения-то? Тырц:
var http = require('http')
	, url = require('url');

var html = '\
<!doctype html> \
<html> \
<head> \
	<meta charset="utf-8"> \
</head> \
<body> \
	<form name="form" action="/form"> \
		<input type="text" name="user"><br> \
		<input type="password" name="pass"><br> \
		<button type="submit">Go</button> \
	</form> \
</body> \
</html>'


http.createServer(function(req, res) {

	var urlParse = url.parse(req.url, true);
	if(req.url == '/') {
		res.end(html);
	} else if(urlParse.pathname == '/form') {
		console.log(urlParse.query);
		res.setHeader('content-type', 'text/html;charset=utf-8');
		res.end('Сенк-ю');
	}

}).listen(3000, () => console.log('Running on PORT: 3000'));

kolfer 17.10.2017 13:03
Что-то пошло не так
 
Есть html:
<!DOCTYPE html>
<html>
<head>
    <title>Регистрация</title>
    <meta charset="utf-8" />
</head>
<body>
<h1>Введите данные</h1>
<form action="/register" method="post">
    <label>Имя</label><br>
    <input type="text" name="userName" /><br><br>
    <label>Возраст</label><br>
    <input type="number" name="userAge" /><br><br>
    <input type="submit" value="Отправить" />
</form>
</body>
<html>

Есть js:
var express = require("express");
var bodyParser = require("body-parser");
var app = express();

var urlencodedParser = bodyParser.urlencoded({extended: false});

app.use(express.static(__dirname + "/public"));

app.post("/register", urlencodedParser, function (request, response) {
    if(!request.body) return response.sendStatus(400);
    console.log(request.body);
    response.send('Complete');
    x=request.body.userName;
    console.log(x);
})
app.listen(63342,console.log("63342"));


Запускаю скрипт, потом страницу, скрипт начинает оживать через минут 20-30. Порт такой, ибо работаю через web-storm.Я так понимаю он его не инициализирует. Но тогда как он потом отрабатывает?


Часовой пояс GMT +3, время: 19:56.