ukryj menu
SPEC
aktualizacja: 2021-10-27 10:55:48
1. forms post, test parsera
klient
formularz z butonem
<form method="post" action="handlePost">
<input name="bt1" value="wyślij dane postem" type="submit" />
</form>kopiuj
server
od wersji 4.16 expressa dane parsujemy wbudowanym parserem, nic nie instalujemy
app.use(express.urlencoded({
extended: true
}));kopiuj
odebranie danych
app.post("/handlePost", function (req, res) {
console.log(req.body)
res.setHeader("content-type", "text/plain")
res.send(req.body)
})kopiuj
console.log(req.body)
res.setHeader("content-type", "text/plain")
res.send(req.body)
})kopiuj
zaobserwuj w zakładce networking fakt odesłania odpowiedniego nagłówka z serwera:
(chrome / f12 / network / odświeżamy stronę / klik w localhost )
(chrome / f12 / network / odświeżamy stronę / klik w localhost )
potestuj poniższe nagłówki
res.setHeader("content-type", "text/plain")kopiuj
res.setHeader("content-type", "text/html")kopiuj
res.setHeader("content-type", "application/json")
kopiuj
kopiuj
wynik na skrinach 01 i 01b
2. post, header content-type
klient
formularz z dwoma inputami
server
ustalamy header, określający typ zwracanych danych jako json
używamy funkcji JSON.stringify aby zestringować dane odsyłane do przeglądarki
parametr 5 oznacza liczbę spacji we wcięciach
res.send(JSON.stringify({a:1}, null, 5))kopiuj
cały post
app.post("/handlePost", function (req, res) {
res.setHeader("Content-Type", "application/json")
res.send(JSON.stringify(obj, null, 5));
})
kopiuj
res.setHeader("Content-Type", "application/json")
res.send(JSON.stringify(obj, null, 5));
})
kopiuj
3. ajax
klient
załączamy kliencki skrypt
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>kopiuj
wstawiamy kolejny skrypt na stronie html
na końcu body, po kliknięciu div-a
$.ajax({
url: "/post",
contentType: 'application/json',
data: JSON.stringify({
a: 5,
b: 10
}),
type: "POST",
success: function (data) {
//czytamy odesłane z serwera dane
console.log(data)
//ew parsujemy na obiekt
var obj = JSON.parse(data)
},
error: function (xhr, status, error) {
console.log('Error: ' + error.message);
},
});kopiuj
url: "/post",
contentType: 'application/json',
data: JSON.stringify({
a: 5,
b: 10
}),
type: "POST",
success: function (data) {
//czytamy odesłane z serwera dane
console.log(data)
//ew parsujemy na obiekt
var obj = JSON.parse(data)
},
error: function (xhr, status, error) {
console.log('Error: ' + error.message);
},
});kopiuj
serwer
parser
app.use(express.json());kopiuj
odebranie danych
app.post("/post", function (req, res) {
console.log(req.body)
})kopiuj
wynik na skrinie 03 i 03b
4. ajax, ranges
klient
dodaj dwa inputy typu range
przesyłaj ajaxem value pierwszego na serwer
serwer
odsyłaj do klienta tą samą wartość i steruj położeniem drugiego range
wynik na skrinie 04
5. mouse click, ajax , json
klient
generuj diva w miejscu kliknięcia lewego panelu
przesyłaj dane x,y na serwer
serwer
odsyłaj dane do klienta, który wygeneruje diva w prawym panelu
wynik na skrinie 05
6. mouse move, ajax, json
klient
jak poprzednio, przybywa opcja w checkboxie
serwer
jak poprzednio
wynik na skrinie 06
7. mouse move, ajax, json
klient
rysowane myszą prostokąty
serwer
jak poprzednio
rysowane myszą prostokąty
serwer
jak poprzednio
wynik na skrinie 07