w33ble/express-verbose-requests
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: server html form

Browse Source
This commit is contained in:
Joe Fleming
2021-07-23 16:03:41 -07:00
parent e0d1f50710
commit 7b7eb4db7f
2 changed files with 61 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
public/index.html Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://raw.githubusercontent.com/jgthms/minireset.css/master/minireset.min.css"
/>
<title>Request Demo</title>
</head>
<body>
<h1>Request Demo</h1>
<h2>Basic POST Form</h2>
<form id="post-form" method="POST" target="/">
<input name="field" />
<button type="submit">Submit</button>
</form>
<h2>Basic AJAX Form</h2>
<form id="ajax-form" method="POST" target="/">
<input name="field" />
<button type="submit">Submit</button>
</form>
<script>
async function submitForm(evt) {
// stop default form behavior
evt.preventDefault();
const target = evt.target;
const input = target.querySelector("input").value;
await fetch("/form", {
method: "POST",
body: JSON.stringify({ input }),
headers: {
"Content-Type": "application/json",
},
});
alert("Submitted!")
}
const form = document
.querySelector("#ajax-form")
.addEventListener("submit", submitForm, false);
</script>
</body>
</html>

9
src/index.js
View File

@@ -1,5 +1,6 @@
const express = require('express'); const express = require('express');
const cors = require('cors'); const cors = require('cors');
const fs = require('fs/promises');
const PORT = process.env.PORT || 8080; const PORT = process.env.PORT || 8080;
@@ -9,6 +10,14 @@ app.use(cors());
app.use(express.json()); app.use(express.json());
app.use(express.urlencoded({ extended: false })); app.use(express.urlencoded({ extended: false }));
app.get('/form', async (req, res) => {
const html = await fs.readFile('public/index.html');
res.setHeader('Content-Type', 'text/html');
res.send(html);
res.end();
});
app.use(function (req, res) { app.use(function (req, res) {
const info = { const info = {
method: req.method, method: req.method,