#html #node.js #express
#HTML #node.js #выразить
Вопрос:
Я начал изучать Nodejs с помощью express и веб-разработки. Итак, для моего первого проекта я хочу создать список каталогов, для которого я нашел очень красивую HTML-форму. Код для формы приведен ниже:
<form action="/formSubmit" method="post" class="vanilla-form" novalidate="novalidate">
<div class="column-100">
<input type="text" name="Name" placeholder="Business Name" required="required">
</div>
<!-- Left column -->
<div class="column-50">
<input type="text" name="address1" placeholder="Address Line 1" required="required">
<input type="text" name="town" placeholder="Town" required="required">
<input type="tel" name="tel" placeholder="Phone" required="required">
<input type="email" name="email" placeholder="Your e-mail" required="required">
<label class="custom-select">
<select name="Category">
<option disabled selected>Select Category</option>
<option>Academic Tuition</option>
<option>Accountants</option>
<option>Alterations</option>
<option>Architectural Services</option>
</select><span><!-- fake select handler --></span>
</label>
</div><!--
Right column
--><div class="column-50">
<input type="text" name="address2" placeholder="Address Line 2">
<input type="text" name="postcode" placeholder="Post Code" required="required">
<input type="tel" name="mobile" placeholder="Mobile Phone" required="required">
<input type="url" name="web" placeholder="Website" required="required">
<input type="file" name="logo" placeholder="Your Logo">
</div>
<div class="column-100">
<textarea name="description" placeholder="Business description" required="required"></textarea>
<label>
<input type="checkbox" name="terms" value="true" required="required"><span><!-- fake checkbox --></span>
<span >I agree to be contacted by RGSix.co.uk</span>
</label>
</div>
<div class="column-100 center">
<input type="submit" value="Send" data-error="Fix errors" data-processing="Sending..." data-success="Thank you!">
</div>
<footer class="notification-box"></footer>
</form>
На стороне сервера я хочу просто записать данные в консоль, но я не могу. Мой код на стороне сервера выглядит следующим образом:
app.post("/formSubmit", function(req, res){
res.status(200);
console.log("Busines Name is: " req.body.Name);
});
Модули, которые я использую, следующие:
const express = require("express");
const ejs = require("ejs");
const bodyParser = require("body-parser");
const app = express();
app.use(express.static("public"));
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({extended:true}));
Результат чтения в моей консоли:
Имя бизнеса: не определено
Мне нужна помощь в понимании того, где я ошибаюсь, пожалуйста.
ОТРЕДАКТИРУЙТЕ скриншот моей консоли после отправки формы
Комментарии:
1. Я не могу воспроизвести это в своем Repl.it используя предоставленный вами код.
2. Если я просто попытаюсь напечатать запрос, а не весь body.Name , я получаю -> Имя бизнеса: [объект Object]
3. Что появится в вашей консоли, если вы используете
console.dir(req.body)?4. @esqew я получаю { }
5. Не могли бы вы также убедиться , что приведенный вами здесь код очень похож / соответствует тому, что вы используете в предоставленном вами скриншоте? Я немного подозреваю, что в вашем коде может быть что-то еще, что существенно отличается от того, что вы указали в вопросе, что потенциально может вызвать описанное вами поведение, потому что я не смог воссоздать его в приведенном выше Repl — это также обусловлено тем фактом, что строка, которую вы добавили кведение журнала в вашей консоли не совпадает со снимком экрана (
Business Name is:‘) and the code you posted (имя бизнеса:`).
Ответ №1:
В моем теле — у меня был этот виновник —
<script>
document.addEventListener("DOMContentLoaded", function () {
var myForm;
myForm = new VanillaForm(document.querySelector("form.vanilla-form"));
});
</script>
Когда я прокомментировал это, он начал работать нормально. Может кто-нибудь, пожалуйста, скажите мне, что он делает, поскольку я еще не изучал его, и его удаление вызовет проблемы в будущем?
Комментарии:
1. Если вы хотите задать вопрос после этого, я бы рекомендовал отредактировать это в теле вашего вопроса и переработать его так, чтобы он спрашивал об этом конкретно (почему вызов
VanillaForm()может вызвать это) — рекомендации по переполнению стека не позволяют задавать последующие вопросы в рамкахраздел ответов (поскольку они не являются строго такими ответами). (Это также восходит к моей мысли о том, чтобы убедиться, что ВЕСЬ ваш код был включен, поскольку это не было частью HTML, который вы предоставили изначально)2. Когда вы редактируете свой вопрос, чтобы включить эту информацию, пожалуйста, также уточните, откуда
VanillaFormвзят пакет (со ссылкой) и зачем именно он вам нужен. Оба не понятны из этого фрагмента, и я не могу найти много информации о самомVanillaFormпакете в Google.
Ответ №2:
Ранее вы сначала отправляли ответ, а затем выполняли журнал консоли. Пожалуйста, попробуйте, это решит вашу проблему.
app.post("/formSubmit", function(req, res){
console.log("Busines Name: " req.body.Name);
res.status(200);
});
Комментарии:
1. Nops, не имело никакого значения : (
2. Вы исследовали это до ответа? Нет абсолютно никаких фактических оснований предполагать, что вы не можете продолжить обработку данных
reqпосле отправки ответа обратно клиенту. Соответствующая ссылка (среди многих других статей и страниц документации).3. @esqew Спасибо за исправление, которое я оценил. Вы нашли решение?