Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.10.2017, 16:48
Новичок на форуме
Отправить личное сообщение для kolfer Посмотреть профиль Найти все сообщения от kolfer
 
Регистрация: 10.10.2017
Сообщений: 9

Передача 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");
    });
});

Последний раз редактировалось kolfer, 10.10.2017 в 16:52.
Ответить с цитированием
  #2 (permalink)  
Старый 10.10.2017, 20:37
Профессор
Отправить личное сообщение для Audaxviator Посмотреть профиль Найти все сообщения от Audaxviator
 
Регистрация: 28.04.2017
Сообщений: 214

Это не просто.
В форме надо написать так:
<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 формы в качестве ключей, значения которых присвоить
  // любым переменным - самая лёгкая часть этой операции.
}
Ответить с цитированием
  #3 (permalink)  
Старый 10.10.2017, 20:45
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,703

Сообщение от Audaxviator
Причём (что неожиданно), поля формы должны-таки иметь разные значения атрибута "name".
Что же тут неожиданного?))
Было бы куда неожиданнее, если бы каждое поле формы имело одно значение, а сервер чудесным образом угадал правильные ключи для переданных ему полей.
Ответить с цитированием
  #4 (permalink)  
Старый 12.10.2017, 19:05
Новичок на форуме
Отправить личное сообщение для kolfer Посмотреть профиль Найти все сообщения от kolfer
 
Регистрация: 10.10.2017
Сообщений: 9

Сообщение от Audaxviator Посмотреть сообщение
Это не просто.
В форме надо написать так:
<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);
})

Ответить с цитированием
  #5 (permalink)  
Старый 12.10.2017, 19:25
Профессор
Отправить личное сообщение для Audaxviator Посмотреть профиль Найти все сообщения от Audaxviator
 
Регистрация: 28.04.2017
Сообщений: 214

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

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

Последний раз редактировалось Audaxviator, 12.10.2017 в 19:48.
Ответить с цитированием
  #6 (permalink)  
Старый 16.10.2017, 22:31
Новичок на форуме
Отправить личное сообщение для kolfer Посмотреть профиль Найти все сообщения от kolfer
 
Регистрация: 10.10.2017
Сообщений: 9

Спасибо, Express именно то, что я искал
Ответить с цитированием
  #7 (permalink)  
Старый 17.10.2017, 12:09
Профессор
Отправить личное сообщение для Audaxviator Посмотреть профиль Найти все сообщения от Audaxviator
 
Регистрация: 28.04.2017
Сообщений: 214

Пожалста. Но для упражнения-то? Тырц:
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'));
Ответить с цитированием
  #8 (permalink)  
Старый 17.10.2017, 14:03
Новичок на форуме
Отправить личное сообщение для kolfer Посмотреть профиль Найти все сообщения от kolfer
 
Регистрация: 10.10.2017
Сообщений: 9

Что-то пошло не так
Есть 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.Я так понимаю он его не инициализирует. Но тогда как он потом отрабатывает?

Последний раз редактировалось kolfer, 17.10.2017 в 15:47.
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Передача переменных php в js HAIRY Оффтопик 2 21.10.2016 01:50
Передача параметров в JS xASM AJAX и COMET 6 13.12.2010 17:57
Передача значений полей через JS MCTrane Общие вопросы Javascript 11 01.12.2010 18:32
Передача массива JS в cookies Denis Общие вопросы Javascript 1 04.08.2009 12:24